How to slide a hidden div up/down on click of a button?

Question

I want to achieve this type of a slide down except instead of on hover I think I need some sort of script that triggers the slide down on click and then click again to trigger the reverse slide up. I will have a div thats hidden (top: -400px; above the top of the page) and when the button is clicked with slide down and sit at top: 0;

HTML

<div class="container"><div class="one">Hover me to reveal new div</div>
<div class="two">I slid!<br>And I am higher than the div before me...</div>
</div>

CSS

.container {
overflow:hidden;
height: 60px;
}

.one {
position: relative;
top: 0;
background-color: lightblue;
z-index: 1;
}

.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}

.one:hover + .two {
top: 0px;
}

Here is a working fiddle http://jsfiddle.net/8ZFMJ/2/ - any help would be appreciated.

I have tried using slideToggle however this creates an 'expanding' effect which isn't the type of slide down I want to achieve.

Many thanks.

Solution 1

Try this http://jsfiddle.net/webcarvers/8ZFMJ/34/

remove this:

.one:hover + .two {
    top: 0px;
}

add this with jQuery Js

$(document).ready(function(){
var clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"top": 0});
    }
    else
    {
        clicked=true;
        $(".two").css({"top": "-40px"});
    }
});
});

Solution 2

almost the same (as the other answer) just also working if you have more than one container:

http://jsfiddle.net/8ZFMJ/32/

$('.one').on('click',function(){
    $(this).next('.two').slideToggle();
});

Solution 3

You can use slideToggle():

$('.one').click(function() {
    $('.two').slideToggle();    
})

Fiddle Demo

Solution 4

I think you need to use jQuery's slideToggle() function, have you tried that?

Solution 5

You need to use .slideToggle()

$(".one").on('click',function(){
    $(".two").slideToggle();
});

Demo

View more solutions

Comments

[Mathew MacLean]

You can also tweak animation speed by using $('.two').slideToggle('fast'); or $('.two').slideToggle('slow');

[user2498890]

Thanks for your response, I have seen this however I don't want the content to 'expand' I want the whole thing to slide down. It's hard for me to explain. If you look at the difference between the on hover and your fiddle you should see what I mean and the effect I want to create.

[user2498890]

Hi, thanks for your response, yeah I've seen that but it creates a sort of 'expanding' effect I want the whole div to slide down like in the fiddle I included at the top.

[user2498890]

Hi, thanks for your response, yeah I've seen that but it creates a sort of 'expanding' effect I want the whole div to slide down like in the fiddle I included at the top

[caramba]

and how do you close <div class="two">after it is visible?

[Kroltan]

@caramba click away from the div, like a normal notification-style popup. This is the only limitation of using CSS

[Kroltan]

@user2498890 working for me, FF 30.0 for Mac. Also works on my outdated Chrome

[caramba]

@Kroltan didn't find out myself, would be nice to add an active state or smthing

[Kroltan]

@caramba AFAIK, you can't add states using only CSS. If you want something more complex, use Javascript.

[user2498890]

Im using Safari 6.1 and it doesn't seem to be working, I need something that works cross browser. Thanks for your help so far.

[user2498890]

Thanks! thats exactly what I need. One more question if I needed 2 buttons one for slide down one for slide up how would I edit that code? Once again many thanks.

[Mayank Tripathi]

[updated]Here is the updated fiddle my friend: jsfiddle.net/webcarvers/8ZFMJ/35

[Mayank Tripathi]

i have changed it. Check it now!

[user2498890]

Thanks for your answer - Would this be possible if I had an image there instead of text as the button?

[user2498890]

One problem i've had with this code is that you have to click twice to get the slide to work the first time you click the button. Any idea why this might be?

[Mayank Tripathi]

use event.preventDefault() and event.stopPropagation() this might help.

[user2498890]

Where abouts would I use them? Really sorry not great with js.