Search code examples
javascriptjquerycsstransition

how to make my transitions for max-height work synchronously?

I have 4 dropdown containers. When i am clicking on a header , i want its associated paragraph to appear and other paragraph, that had been appeared ,disappear.

When a header is clicked, i remove active class from all the other paragraphs and add it to the paragraph that its header is clicked. It works fine but the problem is that first the current paragraph appears and then other paragraph disappears but i want them to work synchronously like while one appears another disappears but i do not know how to do that.

HTML:

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header1</a>
  </div>
  <p class="active">some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header2</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header3</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header4</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

CSS:

.dropDown p{
  background: rgb(245, 245, 245);
  border-right: 40px solid #e8e8e8;
  font-size: 13px;
  line-height: 35px;
  max-height: 0px;
  overflow: hidden;
  margin-bottom: 0;
  padding: 0px 15px 0px 30px;
  transition: max-height .3s ease;
}

.dropDown p.active{
  max-height: 500px;
  padding-top:8px;
  padding-bottom: 20px;
}

jQuery:

Headers.click(function(){
  var theP = $(this).parent().children("p"); //current paragraph
  dropDownParagrsphs.not(theP).removeClass("active");
  theP.toggleClass("active");
});

How can i make the transitions to work together like while one paragraph's height decreases , other paragraph's height increases?

Solution

  • interestingly, you've stumbled on a deceptively difficult problem in pure CSS. The truth is, your paragraphs are already behaving as you want them to, the problem is that you've specified a large max height relative to the actual content of the p, it gives the impression that they are executed one after the other, but that's just because the time it takes is relatively (compared to actual height of p with overflow: hidden) long to grow/shrink max-height to 500px. It's as if you have an invisible box growing to 500px. This should be easily solvable by changing your max-height to auto, but unfortunately you cannot animate height auto in pure CSS transitions. your options are:

    a) choose a different hardcoded max-height which is closer to the actual content size.
    b) use transform scale(Y)
    c) use pure JS: for example slideUp and slideDown

    var Headers = $('.header') 
var dropDownParagraphs = $('.dropDown p') 

Headers.click(function(){
  var theP = $(this).parent().children("p"); //current paragraph
    // theP.addClass("active");
  // dropDownParagraphs.not(theP).removeClass("active");
  dropDownParagraphs.not(theP).slideUp(200);
  theP.slideDown(200);

});

    check this codepen for implementation of c) https://codepen.io/bakuthe3rd/pen/abvzVJz