JavaScript accordion with css transition

Mikkel Madsen

I'm trying to make an accordion without Jquery, and I have made it work 90% ;) The problem I now face is, when you close the accordion the css transition does not work. How do I get the same transition to appear when you open the accordion to happen when you close the accordion?

Snippet:

var expandBtn = document.getElementsByClassName("expand-btn");

var expandClick = function() {
  this.nextElementSibling.classList.toggle("info-list-hide");
  this.parentElement.classList.toggle("expand-info");
}

for (var i = 0; i < expandBtn.length; i++) {
  expandBtn[i].addEventListener("click", expandClick, false);
}

.footer-info-expand { 
  max-height: 46px;
  overflow: hidden;
  border-bottom: 1px solid $oslo-gray;
}

.footer-info-expand.expand-info { 
  max-height: 800px;
  transition: max-height 1s ease-in-out;
}

.expand-btn { 
  display: flex;
  width: 100%;
  height: 45px);
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
}

.info-expand-icon {
  width: 13px;
  height: 8px;
  fill: $river-bed;
}

.info-list-hide { display: none; }

.footer-info-list { 
  margin-top: 10px;
  padding-bottom: 30px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}

<div class="footer-info-expand">
  <a href="javascript:;" class="expand-btn">
    <h3>Nyheder</h3>
    <svg class="info-expand-icon">
      <use xlink:href="img/generel/svg-system.svg#expand-icon"></use>
    </svg>
  </a>
  <ul class="footer-info-list info-list-hide">
    <li>
      <a href="#">Nyhed 1</a>
    </li>
    <li>
      <a href="#">Nyhed 2</a>
    </li>
    <li>
      <a href="#">Nyhed 3</a>
    </li>
    <li>
      <a href="#">Nyhed 4</a>
    </li>
  </ul>
</div>

Marcos Pérez Gude

Add the transition property to the default state:

.footer-info-expand { 
    max-height: rem(46);
    overflow: hidden;
    border-bottom: rem(1) solid $oslo-gray;
    transition: max-height 1s ease-in-out;
}

.footer-info-expand.expand-info { 
    max-height: rem(800);
    transition: max-height 1s ease-in-out;
}

Edit

Here you are the solution with your edited code:

var expandBtn = document.getElementsByClassName("expand-btn");

var expandClick = function() {
  this.nextElementSibling.classList.toggle("info-list-hide");
  this.parentElement.classList.toggle("expand-info");
}

for (var i = 0; i < expandBtn.length; i++) {
  expandBtn[i].addEventListener("click", expandClick, false);
}

.footer-info-expand { 
  max-height: 46px;
  overflow: hidden;
  border-bottom: 1px solid $oslo-gray;
  transition: max-height 1s ease-in-out;
}

.footer-info-expand.expand-info { 
  max-height: 150px;
  transition: max-height 1s ease-in-out;
}

.expand-btn { 
  display: flex;
  width: 100%;
  height: 45px;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
}

.info-expand-icon {
  width: 13px;
  height: 8px;
  fill: $river-bed;
}


.footer-info-list { 
  margin-top: 10px;
  padding-bottom: 30px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  transition: max-height 1s ease-in-out;
}

<div class="footer-info-expand">
  <a href="javascript:;" class="expand-btn">
    <h3>Nyheder</h3>
    <svg class="info-expand-icon">
      <use xlink:href="img/generel/svg-system.svg#expand-icon"></use>
    </svg>
  </a>
  <ul class="footer-info-list info-list-hide">
    <li>
      <a href="#">Nyhed 1</a>
    </li>
    <li>
      <a href="#">Nyhed 2</a>
    </li>
    <li>
      <a href="#">Nyhed 3</a>
    </li>
    <li>
      <a href="#">Nyhed 4</a>
    </li>
  </ul>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.