CODEWITHSUNDEEP
javascriptjqueryhtmlcssaccordion
dghez
dghez

Reputation: 70

Strange accordion behavior with max-height

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.

Upvotes: 2

Views: 1686

Answers (3)

m02ph3u5
m02ph3u5

Reputation: 3161

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.

Upvotes: 1

Muhammad Ashikuzzaman
Muhammad Ashikuzzaman

Reputation: 3143

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>

Upvotes: 0

user5125729
user5125729

Reputation:

Remove the 

.removeClass

like this

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

Upvotes: 0

Related Questions