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

Solution 1

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?

Solution 2

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.

Solution 3

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.

Solution 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.

Solution 5

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>

View more solutions