Expanding content with jQuery (accordion technique)… quick question

Question

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 #lorem1 until it reaches 0
Set #lorem1 to display:none;
Set #lorem2 to display:block; height:0; display: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?

Answer 1

using jQuery you could use the handy toggle attribute:

$('#lorem').animate({
  height: 'toggle'
});

I'm sure other js-libraries offer similar possibilities.

EDIT : Another approach would be animating the object until a height of auto . Or don't hide it via CSS, get the dimensions of the object via JS and hide it afterwards using JS. Now you know the dimensions to show it again.

Answer 2

我认为.slideDown（）和.slideUp（）将为您做到这一点： http ://api.jquery.com/slideDown/

Expanding content with jQuery (accordion technique)… quick question

Question

2 answers

solution1
0 ACCPTED 2010-10-28 23:08:41

solution2
0 2010-10-28 23:34:58

Expanding content with jQuery (accordion technique)… quick question

Question

2 answers

solution1 0 ACCPTED 2010-10-28 23:08:41

solution2 0 2010-10-28 23:34:58

solution1
0 ACCPTED 2010-10-28 23:08:41

solution2
0 2010-10-28 23:34:58