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.

Bernardobernarr

now you want exactly what happens on :hover to happen only on click? – Bystander

If you're using jQuery you can just use the JavaScript onClick feature, can you not? – Atbara

Yeah that exact style of slide down. I've looked at slideToggle and it creates an almost expanding effect which isn't what I want. – Bernardobernarr

Answer 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"});
    }
});
});

Myotonia

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. – Bernardobernarr

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

i have changed it. Check it now! – Myotonia

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

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? – Bernardobernarr

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

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

Answer 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();
});

Bystander

Answer 3

You can use slideToggle():

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

Fiddle Demo

Secretary

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

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. – Bernardobernarr

Answer 4

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

Ebbarta

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. – Bernardobernarr

Answer 5

You need to use .slideToggle()

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

Demo

Pes

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 – Bernardobernarr

Answer 6

You can do it using pure CSS: http://jsfiddle.net/8ZFMJ/33/

HTML:

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

CSS:

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

You can also remove the link styling to your taste, so it looks like regular text.

Marris

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

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

@Bernardobernarr working for me, FF 30.0 for Mac. Also works on my outdated Chrome – Marris

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

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

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. – Bernardobernarr