CODEWITHSUNDEEP
javascripthtmlcss
Mikkel Madsen
Mikkel Madsen

Reputation: 347

JavaScript accordion with css transition

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>

Upvotes: 4

Views: 18354

Answers (2)

Transformer
Transformer

Reputation: 3760

Here is my own slution

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 0.5s 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>

Upvotes: 0

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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>

Upvotes: 4

Related Questions