Javascript default open collapsible css transition doesn't work on first click

Question

I tried to get a collapsible working and I followed this example. I want to have several of those and some of them should be active by default. I checked this question to get the default open collapsible running and it works fine with the exception that the CSS transition doesn't work on the first try.

I forked the jsfiddle from the question above and changed it to my current solution. I also increased the transition time to show the problem better.

JSFiddle: https://jsfiddle.net/0q2cko7p/

function toggleCollapsibleSectionWithAnimation() {
    this.classList.toggle("collapsible-active");
    var buttonId = this.id;
    var sectionId = buttonId.replace("button","section");
    var content = document.getElementById(sectionId);
    if (content.style.maxHeight) {
        content.style.maxHeight = null;
    } else {
        content.style.maxHeight = content.scrollHeight + "px";
    }
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #777;
  color: white;
  padding: 10px;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsible-active, .collapsible:hover {
  background-color: #444;
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.collapsible-active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/* Style the collapsible content. Note: hidden by default */
.collapsible-content {
  max-height: 0;
  padding: 10px;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

<button class="collapsible collapsible-active" id="collapsible-button-0" onclick="toggleCollapsibleSectionWithAnimation.call(this)">
    <b>Model</b>
</button>
<div class="collapsible-content" id="collapsible-section-0" style="max-height: 100%">
 <h1>
    Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text
 </h1>
</div>

Steve · Accepted Answer · 2019-11-11T14:30:53.670

1

This is because .collapsible-content element has max-height: 100%; You need to set it in pixels.

If you want reusable solution I suggest using data-attribute (something like data-expanded="true") to tell script which of nodes are expanded by default. here the link to example

edited Nov 11 '19 at 14:30

answered Nov 11 '19 at 14:21

Steve

582
3
6

Thanks. I changed the solution a bit and it works fine. But now I have a new question. Why is there these difference between `%` and `px`. – Darkproduct Nov 11 '19 at 14:39
@Darkproduct my understanding is that it's a browser thing for performance. Read the intro paragraphs here https://css-tricks.com/using-css-transitions-auto-dimensions/ and get heaps of information from this question https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css – Ash Nov 11 '19 at 14:48

Javascript default open collapsible css transition doesn't work on first click

1 Answers1