html - JavaScript accordion with css transition - Stack Overflow

admin管理员组

文章数量:1314442

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>

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>

• javascript
• html
• css

Share Improve this question Follow edited Feb 10, 2016 at 9:11 Mikkel Madsen asked Feb 10, 2016 at 8:38 Mikkel MadsenMikkel Madsen 34733 gold badges55 silver badges1818 bronze badges 5

• By just seeing your code, the best I can guess is put transition: max-height 1s ease-in-out; to .footer-info-expand – Mr. Alien Commented Feb 10, 2016 at 8:45
• Did not do the trick :/ – Mikkel Madsen Commented Feb 10, 2016 at 8:48
• your code is working it opens after been closed – Transformer Commented Feb 10, 2016 at 8:53
• Maybe I need to edit my question. I want the transition it is making when you open to apply for when you close it. – Mikkel Madsen Commented Feb 10, 2016 at 8:56
• @Apb that's not related with the question or the problem. Please, read carefully and see what you are sharing before post ments or answers. – Marcos Pérez Gude Commented Feb 10, 2016 at 9:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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>

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>

本文标签： htmlJavaScript accordion with css transitionStack Overflow