javascript - Add Easing effect within Accordion -

can me intergrate easing effect within accordion?

what want mimic effect (which can set in css) jquery:

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

how can accomplish this?

made jsfiddle of problem.

ps. having smooth easing effect trick.

if understand correctly, want replicate slidedown() , slideup() of jquery doing them in pure css 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: 300ms ease-in-out; } 

javascript:

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

hope helps.