Strange accordion behavior with max-height

Question

I was creating an accordion but because of the transition between height: 0 and height: auto can't be animated I found a way animating max-width but like you can see in this way the timeline is not good, before open the one where the user clicks, then close the others. Is there a way to solve that?

.content{
  overflow: hidden;
  max-height: 0;
  transition: all 1s;
}
.active .content{
  max-height: 500px;
}

FIDDLE HERE

UPDATE:
the problem is about max height, because with a specific height works like a charm.

Are you trying to make it were they can all be open at same time? — , Oct 25 '15 at 15:13
This was actually a good question. Didn't think about this before. — m02ph3u5, Oct 25 '15 at 16:11

score 1 · Answer 1 · edited May 23 '17 at 10:27

You could just use jQuery's sliedUp() and slideDown():

$(document).ready(function(){
    $(".singleAccordion").on("click", function(){
        $(this).siblings().children(".content").slideUp();
        $(".content", this).slideDown();
    });
});

with following CSS:

.content{
  overflow: hidden;
  max-height: 500;
  display: none;
}

Let me try to give some explanation.

Usually both transitions should run (pretty much) at the same time. If you replace max-height with just height (in your original code) you can see that that's actually the case. But for max-height this seems to be different. I don't know why this is the case but I'd guess that it might be hard to derive the actual height that has to be applied while other transitions are running on the same DOM subtree and so it's just getting queued.

I'll take a look at some docs to see what's the reason behind this. Will report back if I find more intel.

Alright, I digged a little deeper. It really seems like the calculation of the actual height is the issue. Take your above code and replace max-height: 500px with max-height: 5000px. You'll see that it takes reeeaally long until the collapse happens. Now put max-height: 50px in there and they will appear to happen at the same time. Maybe this is because it's still animating beyond the actually required height. Sadly you can't animate onto height: auto - most probably for quite the same reason.

it looks it works. But can explain me why with my method doesn't wok? ps: I prefer to work with classes if possible because you can add more animations — dghez, Oct 25 '15 at 15:33
thanks for the reply. So there are 2 solutions I think. FIRST: set every height and then animate the height or SECOND: use slideUp & slideDown. — dghez, Oct 28 '15 at 08:42
@dghez You're wlcome. If you actually *know* the height it'd be better to use the height directly anyway (instead of max-height) :) — m02ph3u5, Oct 28 '15 at 09:00
of I don't. There is some text inside the accordion, and it's impossible to set a fixed height ;) — dghez, Oct 28 '15 at 10:53

score 0 · Answer 2 · answered Oct 25 '15 at 15:14

0

Remove the

.removeClass

like this

$(document).ready(function(){
$(".singleAccordion").on("click", function(){
$(this).addClass("active").siblings("active");
});
});

answered Oct 25 '15 at 15:14

score 0 · Answer 3 · answered Oct 25 '15 at 15:50

Just use Jquery Ui Accordion. That is awesome.
Here is JssFiddle

  <head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>    
<div id="accordion">
  <h3>Part1</h3>
  <div> <p>  1  </p> </div>
  <h3>part2</h3>
  <div> <p>  2  </p> </div>
  <h3>Part3</h3>
  <div>  <p>   3  </p>  </div>
  <h3>Part4</h3>
  <div>  <p>  4 </p>  </div>
</div>
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
    </body>

yup but I don't want to add jQuery UI. – dghez Oct 25 '15 at 15:53 — dghez, Oct 25 '15 at 15:53
Oh! :) . But that is awesome :) . – Muhammad Ashikuzzaman Oct 25 '15 at 15:53 — Muhammad Ashikuzzaman, Oct 25 '15 at 15:53

Strange accordion behavior with max-height

3 Answers3