0

I created an accordion and trying to add transition effect whenever the user tries to click on the accordion header.

I added height: auto and transitiion to the accordion container, but this effort seems useless here.

var texts = document.getElementsByClassName('text');
[].slice.call(texts).forEach(function (text) {
    text.onclick = function () {
        text.parentElement.classList.toggle('animate');
    }
});

Here is the Fiddle

PS: the height of each content differs and the animation should happen while opening and closing the content.

EDIT:

I tried the possible duplicate question solution, which isn't animating perfecting,

http://jsfiddle.net/9vuor3oo/5/

The animation works only while opening the accordion but not closing it. and also the last accordion doesn't even animate on opening.

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
  • possible duplicate of [How can I transition height: 0; to height: auto; using CSS?](http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) – Amit Jul 30 '15 at 06:07
  • @Amit this isn't solving the problem. http://jsfiddle.net/9vuor3oo/4/ – Mr_Green Jul 30 '15 at 06:11
  • I marked it as duplicate because the essence of the question is the same: animating CSS `height: auto` (impossible). The fact that it's not working for you is irrelevant and you need to post a new question or modify your current question to show the problem without `height: auto` – Amit Jul 30 '15 at 06:28

1 Answers1

1

I updated your sample: http://jsfiddle.net/9vuor3oo/6/. You need to add the max-hight to .parent .child and then add transition to that.

MJ Fathinia
  • 259
  • 2
  • 11