CODEWITHSUNDEEP
javascriptjquerycss
Rotan075
Rotan075

Reputation: 2615

Add Easing effect within Accordion

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.

Upvotes: 0

Views: 414

Answers (2)

Tahir Ahmed
Tahir Ahmed

Reputation: 5737

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.

Upvotes: 2

Siddharth Thevaril
Siddharth Thevaril

Reputation: 3798

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

Upvotes: 1

Related Questions