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.

now you want exactly what happens on :hover to happen only on click? — caramba, Feb 27 '14 at 14:42
If you're using jQuery you can just use the JavaScript onClick feature, can you not? — TylerH, Feb 27 '14 at 14:47
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. — user2498890, Feb 27 '14 at 14:51

score 12 · Accepted Answer · answered Feb 27 '14 at 14:59

12

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

answered Feb 27 '14 at 14:59

Mayank Tripathi

1,346
7
21

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. – user2498890 Feb 27 '14 at 15:01
[updated]Here is the updated fiddle my friend: http://jsfiddle.net/webcarvers/8ZFMJ/35/ – Mayank Tripathi Feb 27 '14 at 15:06
i have changed it. Check it now! – Mayank Tripathi Feb 27 '14 at 15:07
Thanks for your answer - Would this be possible if I had an image there instead of text as the button? – user2498890 Feb 27 '14 at 15:10
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? – user2498890 Feb 27 '14 at 17:12
use event.preventDefault() and event.stopPropagation() this might help. – Mayank Tripathi Feb 27 '14 at 17:32
Where abouts would I use them? Really sorry not great with js. – user2498890 Feb 27 '14 at 18:14

score 6 · Answer 2 · answered Feb 27 '14 at 14:47

6

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

answered Feb 27 '14 at 14:47

caramba

21,963
19
86
127

score 2 · Answer 3 · answered Feb 27 '14 at 14:44

2

You can use slideToggle():

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

Fiddle Demo

answered Feb 27 '14 at 14:44

Felix

37,892
8
43
55

You can also tweak animation speed by using `$('.two').slideToggle('fast'); ` or `$('.two').slideToggle('slow'); ` – SimplyAzuma Feb 27 '14 at 14:46
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 Feb 27 '14 at 14:47

score 1 · Answer 4 · answered Feb 27 '14 at 14:42

1

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

answered Feb 27 '14 at 14:42

b4rbika

147
1
7

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 Feb 27 '14 at 14:48

score 1 · Answer 5 · answered Feb 27 '14 at 14:46

1

You need to use .slideToggle()

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

Demo

answered Feb 27 '14 at 14:46

Dhaval Marthak

17,246
6
46
68

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 Feb 27 '14 at 14:49

score 0 · Answer 6 · answered Feb 27 '14 at 14:51

0

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.

answered Feb 27 '14 at 14:51

This company is turning evil.

5,021
5
34
58

and how do you close `
`after it is visible?
– caramba Feb 27 '14 at 14:53
@caramba click away from the div, like a normal notification-style popup. This is the only limitation of using CSS – This company is turning evil. Feb 27 '14 at 14:53
@user2498890 working for me, FF 30.0 for Mac. Also works on my outdated Chrome – This company is turning evil. Feb 27 '14 at 14:56
@Kroltan didn't find out myself, would be nice to add an active state or smthing – caramba Feb 27 '14 at 14:56
@caramba AFAIK, you can't add states using only CSS. If you want something more complex, use Javascript. – This company is turning evil. Feb 27 '14 at 14:58
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 Feb 27 '14 at 14:58

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

6 Answers6