Slide Down

Pure CSS alternative to jQuery's slide down animation. Uses max-height to animate element. Useful for menus and accordion content.

Requires JavaScript to toggle active class.

Slide Down

  • Item One
  • Item Two
  • Item Three
  • Item Four

HTML

<div class="slide-down">
    <h4>Slide Down</h4>
    <ul class="elr-slide-down elr-unstyled-list">
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
        <li>Item Four</li>
    </ul>
</div>

Sass

.slide-down {
    cursor: pointer;

    h4 {
        background-color: $elr-blue;
        padding: 10px;
        color: $white;
        border-radius: 5px;
        margin-bottom: 5px;
    }

    .elr-slide-down {
        @include elr-slide;
        background-color: $elr-blue;
        color: $white;
        list-style: none;
        margin: 0;
        padding: 0;
        border-radius: 5px;

        li {
            padding: 5px 10px;
        }
    }
}

JavaScript

$('.slide-down').on('click', function() {
    $(this).find('.elr-slide-down').toggleClass('active');
});