This may be a bit silly question, but I just started doing pretty things in jQuery and I suddenly wondered how to solve a problem that I never even bothered looking into without the help of frameworks.
Suppose we have two div elements:
<body>
<div id="lorem1" style="display:block; height:400px;">
Lorem ipsum...
</div>
<div id="lorem2" style="display:hidden;">
dolor sit amet...
</div>
</body>
Now if we wanted to use an accordion effect to shrink the first div out of existence and grow the second one into existence, I'd assume we'd have the following simple logic:
- Iteratively decrease the height of
#lorem1until it reaches 0 - Set
#lorem1todisplay:none; - Set
#lorem2todisplay:block; height:0; - Iteratively increase the height of
#lorem2
Then the problem... Increase the height of lorem2... until when? How do we know the final height of our element? We clearly can't pick a static value like "increase it until it reaches 400px", because the content of lorem2 might be more than 400 pixels tall. Alternatively if it's less than 400 pixels then any background colors/images or other elements on the page may not look right.
So how do we figure out when to stop our accordion?