How to make a "roll-up curtain"-style drop-down menu not pop out above its parent when rolled up

Question

I'm trying to make a list filled with an unknown number of items animate out from underneath a div when it is being hovered over in such a way that it seems like the list is being pulled down rather than resized down. (The jquery slideDown() and slideToggle()-functions does the "pulled down" version nicely, but I want the list items to come down kinda like if you had written on roll-up curtains and were rolling it down.)

Lists, divs, or tables doesn't matter; as long as it looks like I want it to.

Here's a jsfiddle with the essentials of what I've tried. As in the real application, the only problem is that when it's in its up-rolled position, (sometimes) it's higher than the parent div and shows up above it.

In the code below (from jsfiddle), I want #popouter to only show when it's below #toggle, not when it sticks up above it when being "rolled up":

<div id="oneofmanyitems">
    <div id="toggle"><h2>Click me to reveal the generated texts</h2></div>
    <div id="popouter">
        <div>Some generated text</div>
        <div>Some generated text</div>
        <div>Some generated text</div>
        <div>Some generated text</div>
    </div>
</div

I'd love for there to be a way to let the list items "float" down and just animate() up the height of the list until all of the items (starting with the top-most) popped out due to overflow: hidden, but that doesn't seem to be possible without having to give the items position:absolute and thus making them appear on top of each other in the bottom of the list.

Usually, I'd just Jquery-brute-force the divs to disappear after some arbitrary time of scrolling upp underneath the parent div, but in this case I also have the list-div that, in that case, would need to be partially (hidden in the top) as it goes up.

Anyone have any ideas on how to make this work? Maybe I'm just thinking into a corner by now and aren't seeing the obvious answer.

Thanks!

why not try using a jquery ui accordion instead..http://jqueryui.com/accordion/ — Lucky, Jul 24 '14 at 07:04
I know the animation is slightly different, but is `slideToggle()` no good for you? http://jsfiddle.net/dU887/3/ — Rory McCrossan, Jul 24 '14 at 07:05
@RoryMcCrossan, Sure, I've been playing around with that earlier, but I kinda want the roll-up curtain style (you understand what I mean, right?) And it seems like it shouldn't be that hard. — Henrik, Jul 24 '14 at 07:09
@Lucky, Yeah, that looks kinda nice. I'll probably use that if I don't find a way to do what I want. Assuming it works with differently sized accordions. — Henrik, Jul 24 '14 at 07:12

score 0 · Answer 1 · answered Jul 24 '14 at 07:09

Try this code

DEMO

<div id="oneofmanyitems">
    <div id="toggle" class="active">
        <h2>Click me to reveal the generated texts</h2>
    </div>
    <div id="popouter">
        <div>Some generated text</div>
        <div>Some generated text</div>
        <div>Some generated text</div>
        <div>Some generated text</div>
    </div>
</div>

 $('#toggle').click(function(){
        if ($(this).hasClass('active')){
            $(this).removeClass('active');
            $("#popouter").slideUp();
         }else{
            $(this).addClass('active');
            $("#popouter").slideDown();                 
         }
        return false;
 });

Thanks, but this is kinda what I've already had but didn't like. I don't want the list items to be "revealed", I want them to "enter" from above in a row, if that makes sense. — Henrik, Jul 24 '14 at 07:16

aashi · Answer 2 · 2014-07-24T07:25:20.880

0

In place of using $("#popouter").animate({marginTop: -h}, 1000); why dont u try $("#popouter").slideToggle();.. In css ,

.popouter{display:none}

and in JS

$('.toggle').click(function(){
      var $div = $(this).next('.popouter').slideToggle();
      $(".popouter").not($div).hide();   
});

the above script is for use in more than one div..use classes instead of id

edited Jul 24 '14 at 07:25

answered Jul 24 '14 at 07:09

aashi

492
3
11

The class vs. id, isn't really an issue (although you're probably right, I should have used classes in my jsfiddle). If you look at the [real page](http://svenhenrikkarlsson.com/urbantreeselector/) you'll see what it actually looks like, and the classes/id and stuff like that isn't really an issue, it's just the manner in which the list comes down (and shows above the parent div when it's rolled up). – Henrik Jul 24 '14 at 07:19
ok...so is the animation with slidetoggle is useable for you ?? – aashi Jul 24 '14 at 07:24
Nope. Compare how the items exit with slidetoggle() and with animate() on my jsfiddle (or on the site). – Henrik Jul 24 '14 at 07:26

How to make a "roll-up curtain"-style drop-down menu not pop out above its parent when rolled up

2 Answers2