Add Easing effect within Accordion

Question

Can anyone help me intergrate an easing effect within my Accordion?

What I want is to mimic this effect (which can be set in your CSS) with JQuery:

  -webkit-transition: max-height 500ms ease, padding 500ms ease;
  transition: max-height 500ms ease, padding 500ms ease;

How can I accomplish this?

Made a JSFIDDLE of my problem.

PS. Having a smooth easing effect would also do the trick.

Answer 1

If I understand it correctly, you want to replicate what slideDown() and slideUp() of jQuery by doing them in pure CSS with the use of transition property.

Then try this solution out.

CSS:

h3 {
    display: block;
    background-color: pink;
    color: #fff;
    padding: 20px;
    margin-bottom: 0px;
}
.accordion__content {
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    overflow: hidden;
    padding: 0;
    max-height: 0;
    transition: max-height 300ms ease-in-out, padding 300ms ease-in-out;
}
.accordion__content--displayed {
    max-height: 100px;
    padding: 20px;
    transition: all 300ms ease-in-out;
}

JavaScript:

$(function () {
    $('.accordion h3').click(function () {
        $(this).next('.accordion__content').toggleClass('accordion__content--displayed');
    });
});

Hope this helps.

Answer 2

By default, jQuery's slideUp() provides 2 easing functions -

• swing (default)
• linear

There are many more easing functions available but as external plugins.

As of now, if you want a smooth easing effect, you can change the speed in milliseconds like this -

$(this).next(".accordion__content").slideToggle(500).siblings(".pane:visible").slideUp();

Check this link , jQuery UI provides many easing functions