CSS transition on display:block not working

Question

I am trying to put a transition from display:none to display:block on a div.

But the transition doesn't work...

var acc = document.getElementsByClassName("accordion");
var i;
var allpanel = document.getElementsByClassName("panel");

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    for (j = 0; j < allpanel.length; j++) {
      allpanel[j].classList.remove("hasactive");
    }
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      // panel.style.display = "none";
      panel.classList.remove("hasactive");
    } else {
      // panel.style.display = "block";
      panel.classList.toggle("active");
    }
  });
}

.accordion {
  background-color: #00827D;
  color: White;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.accordion:hover {
  background-color: #00827D;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.panel.active {
  display: block;
  transition: all 3s ease;
}

<h2>Accordion</h2>

<div class="accordion">Section 1</div>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

You cannot animate / transition the display property. You can modifiy the opacity/ height/ position to simulate it. The display is a binary show or hide with no transition between the two states. — gavgrif, Aug 08 '18 at 02:03

score 0 · Accepted Answer · answered Aug 08 '18 at 02:04

Taking a trick from How can I transition height: 0; to height: auto; using CSS?:

var acc = document.getElementsByClassName("accordion");

for (var i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    panel.classList.toggle("active");
  });
}

.accordion {
  background-color: #00827D;
  color: White;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.accordion:hover {
  background-color: #00827D;
}

.panel {
  padding: 0 18px;
  max-height: 0;
  background-color: white;
  overflow: hidden;
  transition: all 3s ease;
}

.panel.active {
  max-height: 100vh;
}

<h2>Accordion</h2>

<div class="accordion">Section 1</div>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

The trick to this is changing max-height rather than display because this allows a smooth transition. There is no way to smoothly change from taking up space (display: block) to disappearing (display: none), or vice versa.

exactly what I was looking for. thank you – Tyvain Aug 08 '18 at 02:43 — Tyvain, Aug 08 '18 at 02:43
@Tyvain I'm glad I could help! – StardustGogeta Aug 08 '18 at 02:53 — StardustGogeta, Aug 08 '18 at 02:53

CSS transition on display:block not working

1 Answers1