JavaScript accordion with css transition

Question

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>

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, Feb 10 '16 at 08:45
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, Feb 10 '16 at 08:56
@Apb that's not related with the question or the problem. Please, read carefully and see what you are sharing before post comments or answers. — Marcos Pérez Gude, Feb 10 '16 at 09:08

Marcos Pérez Gude · Accepted Answer · 2016-02-10T09:38:46.573

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>

edited Feb 10 '16 at 09:38

answered Feb 10 '16 at 08:47

Marcos Pérez Gude

21,869
4
38
69

For some mystic reason this does not work, tried that yesterday as well. Hmm, could it be because of the display: none; ? I need this because I want the accordion to be tap able, and there is links inside of it, if I don't have display:none; some users should go through all links, even though they might not need to see that content. – Mikkel Madsen Feb 10 '16 at 08:50
I put your code into a fiddle and it doesn't work never. It open and close, but the transition never appeared. The `display: none` affects obviously. Maybe you want to change to `max-height: 0 ` – Marcos Pérez Gude Feb 10 '16 at 08:56
Hmm, not doing the trick. I'm really confused with this JS and css transition stuff. – Mikkel Madsen Feb 10 '16 at 08:59
Only as curiosity, what the hell is this? `rem(800);` it's maybe a SASS function? – Marcos Pérez Gude Feb 10 '16 at 09:01
Hehe ye:P Just me being lazy. I get AI and psd files from the designers in pixels. So to make it easy for myself I made a function like this: "@function rem($size) { $remSize: $size / 16; @return $remSize * 1rem; } – Mikkel Madsen Feb 10 '16 at 09:03
1

I imagine that, but in stackoverflow you need to provide a Minimal, Complete and Verifiable Example. Read this: http://stackoverflow.com/help/mcve . If you edit your post you can write your code into a snippet and with the real proccesed values and properties. If you provide a working example, we help you in seconds. – Marcos Pérez Gude Feb 10 '16 at 09:06
Sorry, I'm correcting the Question and adding a fiddle. – Mikkel Madsen Feb 10 '16 at 09:09
I help you adding the snippet in the post, but you need to edit with real values. When you finish, be sure to receive a good answer with your solution. Thank you! – Marcos Pérez Gude Feb 10 '16 at 09:10
The values are changed :) – Mikkel Madsen Feb 10 '16 at 09:12
1

See my edition, here you will get the solution. If you run the snippet you'll see that it works – Marcos Pérez Gude Feb 10 '16 at 09:22
1

Ye it seems to work:D Nice, but there is this weird none smooth "pause" before the transition does its job. Is this because the open transition has to be done before? – Mikkel Madsen Feb 10 '16 at 09:28
No, it happens because you have a `max-height` of 800 pixels, so when it closes goes since 800 to zero, but the accordion content hasn't got more than 200 pixels right now, so 600 pixels are making the transition without visual effects. That's the reason why you see a "pause". – Marcos Pérez Gude Feb 10 '16 at 09:38
I change it to `max-height: 150px` and you can see now that the "pause" disappears. – Marcos Pérez Gude Feb 10 '16 at 09:39
Oh I see, thank you very much!:) I wish there was a solution for the JS to know the height for each accordions, so I don't have to guess :P – Mikkel Madsen Feb 10 '16 at 09:39
You can use this properties: http://stackoverflow.com/a/526352/5035890 to know the rendered height of one layer. – Marcos Pérez Gude Feb 10 '16 at 09:41
However, you can upvote my answer and make it as the correct answer. Thank you :) – Marcos Pérez Gude Feb 10 '16 at 09:46

score 0 · Answer 2 · answered Feb 10 '16 at 09:53

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>

JavaScript accordion with css transition

Snippet:

2 Answers2

Edit