Slide down animation from display:none to display:block?

Question

Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way?

$(document).ready(function() {
    $('#box').click(function() {
        $(this).find(".hidden").toggleClass('open');
    });
});

#box {
    height:auto;
    background:#000;
    color:#fff;
    cursor:pointer;
}
.hidden {
    height:200px;
    display:none;
}
    .hidden.open {
        display:block;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
    Initial Content
    <div class="hidden">
        This is hidden content
    </div>
</div>

And a JSFiddle

possible duplicate of [Slide down and slide up div on click](http://stackoverflow.com/questions/5279733/slide-down-and-slide-up-div-on-click) — TylerH, Jun 19 '14 at 19:25
@TheOneWhoPrograms That question isn't about jQuery or onClick. — TylerH, Jun 19 '14 at 19:26

score 30 · Accepted Answer · edited May 23 '17 at 12:34

30

Yes, there is a way: http://jsfiddle.net/6C42Q/12/

By using CSS3 transitions, and manipulate height, rather than display property:

.hidden {
    height: 0px;
    -webkit-transition: height 0.5s linear;
       -moz-transition: height 0.5s linear;
        -ms-transition: height 0.5s linear;
         -o-transition: height 0.5s linear;
            transition: height 0.5s linear;
}

.hidden.open {
     height: 200px;
     -webkit-transition: height 0.5s linear;
        -moz-transition: height 0.5s linear;
         -ms-transition: height 0.5s linear;
          -o-transition: height 0.5s linear;
             transition: height 0.5s linear;
}

More here: Slide down div on click Pure CSS?

edited May 23 '17 at 12:34

Community

1
1

answered Jun 19 '14 at 19:37

sinisake

11,240
2
19
27

Doesn't work. I try to click on the black bar (initial content) and nothing happens. – AlikElzin-kilaka May 21 '15 at 10:50
34

This does not answer the original question of animating display: none to display: block. This isimportant for accessibility, ensuring hidden content is not in the tab index etc... – StueyKent Oct 05 '17 at 14:00
we don't need to add transition to sub class when the main class already has it – Nabeel Khan May 27 '18 at 20:19
3

But you need to know the height in order to do the animation. and you dont know it inside the css. – Pavel Hasala Oct 26 '19 at 20:42

score 15 · Answer 2 · answered Jun 19 '14 at 19:41

15

Since you're already using jQuery, the simplest thing is just to use slideDown(). http://api.jquery.com/slidedown/

There's also slideToggle().

Then you don't need to manually do all the browser-specific transition css.

answered Jun 19 '14 at 19:41

bhamlin

5,177
1
22
17

I was building this all out manually because I'd somehow overlooked `slideDown()`. THANK YOU. – aronmoshe_m Nov 05 '20 at 00:26

score 7 · Answer 3 · answered Jan 09 '17 at 19:08

7

I like the idea of CSS transitions, but it's still very jumpy. Sometimes the max-height has to be set to a very high number because of dynamic content which renders the transition useless as it's very jumpy. So, I went back to jQuery, but it had its own faults. inline elements are jumpy.

I found this to work for me:

$(this).find('.p').stop().css('display','block').hide().slideDown();

The stop stops all previous transitions. The css makes sure it's treated as a block element even if it's not. The hide hides that element, but jquery will remember it as a block element. and finally the slideDown shows the element by sliding it down.

answered Jan 09 '17 at 19:08

Webmaster G

502
5
12

Thanks! Exactly what I was looking for :) How can I slide it back up? – Gintas K May 04 '17 at 10:06
1

Probably use slideUp instead of slideDown I'm guessing. `$(this).find('.p').stop().css('display','block').hide().slideUp();` Or you can slideToggle? `$(this).find('.p').stop().css('display','block').hide().slideToggle();` – Webmaster G May 05 '17 at 12:45
Thanks! a simple `.stop().slideUp()` did the job :) – Gintas K May 05 '17 at 13:00

score 4 · Answer 4 · answered Jun 19 '14 at 19:33

4

What about

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

Toggle will switch your div on/off, and the animate should make it appear from below. In this scenario, you don't need the specific CSS to "hide" it.

answered Jun 19 '14 at 19:33

Martin

7,634
1
20
23

score 4 · Answer 5 · answered Jan 27 '22 at 14:10

We can use visibility: hidden to visibility: visible instead of display: none to display: block property.

See this example:

function toggleSlide () {
  const div = document.querySelector('div')
  
  if (div.classList.contains('open')) {
    div.classList.remove('open')
  } else {
    div.classList.add('open')
  }
}

div {
  visibility: hidden;
  transition: visibility .5s, max-height .5s;
  max-height: 0;
  overflow: hidden;
  
  /* additional style */
  background: grey;
  color: white;
  padding: 0px 12px;
  margin-bottom: 8px;
}

div.open {
  visibility: visible;
  /* Set max-height to something bigger than the box could ever be */
  max-height: 100px;
}

<div>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</div>


<button
  onclick="toggleSlide()"
>
  toggle slide
</button>

score 0 · Answer 6 · answered Jan 28 '22 at 14:55

I did this workaround for the navigation header in my React site.

This is the regular visible css class

.article-header {
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
}

This is the class that is attached to the div (when scrolled in my case)

.hidden {
  top: -50px !important;
  transition: top 0.5s ease-in-out;
 }

score -1 · Answer 7 · answered Jun 19 '14 at 20:44

You can use also

$('#youDiv').slideDown('fast');

or you can tell that the active div goes up then the called one goes down

$('.yourclick').click(function(e) {
       var gett = $(this).(ID);
       $('.youractiveDiv').slideUp('fast', function(){
        $('.'+gett).slideDown(300);
       });
});

Something like that.

Slide down animation from display:none to display:block?

And a JSFiddle

7 Answers7

Linked