Animated collapsible inside animated collapsible not working

Question

I am testing the W3Schools example for animated collapsibles.

The sliding/animated collapsible example works OK, but I need to develop a collapsible inside a collapsible (a "recursive collapsible", we could name it).

My modification of the original example just adds a collapsible inside the initial Open Section 1 collapsible that outputs a simple "The Lorem ipsum... etc, thing." text:

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>

<h2>Animated Collapsibles</h2>

<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <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>

<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <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>
  <p>Collapsible inside collapsible:</p>
 <button class="collapsible">Open Collapsible inside Collapsible</button>
 <div class="content">
  <p>The Lorem ipsum... etc, thing.</p>
 </div>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <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="collapsible">Open Section 3</button>
<div class="content">
  <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>

How to reproduce the error:

1.- Click on Open Section 1 . Works OK.
2.- Click on Open Collapsible inside Collapsible. Not working.

A curious detail:

1.- Click on Open Section 1 . Works OK.
2.- Click on Open Collapsible inside Collapsible. Not working.
3.- Click on Open Section 1 . Works OK (the collapsible closes).
4.- Click on Open Section 1 . Works OK and the inner collapsible is now correctly open.

How could I solve this problem in order to make collapsibles inside collapsibles work OK?

Further notes:

The not animated collapsible example at W3Schools seems to work OK and not to have this problem when doing it recursive (collapsibles inside collapsibles).

score 1 · Answer 1 · answered Jun 24 '19 at 00:50

1

The problem to your code is this line

content.style.maxHeight = content.scrollHeight + "px";

Since you are setting the max-height based on the content inside the collapsible, the moment you expand the first time, the nested collapse is not open yet, making the max-height to be exactly up to the point of the nested collapsible title. If you click on the nested title, it then open, but since you limit the height of the parent, any overflow to be hidden (I think it's still there, just underneath the other collapsible title). As I see, you have 2 ways to combat this:

Do this. This will add an offset to your content, allowing your content to expand a bit more to make room for nested. This is fine but you need to know how deep (how height) it is to make this offset better.
Add overflow: auto into your .content class in css. The good point of this is that you don't need to specify the correct height you need like the other case, but it's kinda hidden in term of design, cause you might not pay attention to the scroll bar (on Mac)

Your choice man ;)

answered Jun 24 '19 at 00:50

Tree Nguyen

1,198
1
14
37

Solution 1 works and I could set a big offset number, but here comes the same problem in the Todd Chaffee's solution: animation is too fast (there is no animation). – Sopalajo de Arrierez Jun 24 '19 at 01:42
@SopalajodeArrierez I don't see what you are seeing. I have changed the link up there to have animation duration to 1s instead of 0.2s in yours. Animation is there, it's nothing related to js, but to css. – Tree Nguyen Jun 24 '19 at 04:30
@SopalajodeArrierez this is the overflow one. https://codepen.io/mankinchi/pen/rEmqjM. It might not look like so but if you scroll inside the first collapsible (the one with nested), you will see it working – Tree Nguyen Jun 24 '19 at 04:32
Mmm... I think you were right about the animation duration part. I was lowering its value (`0.01s` instead of `1s`). – Sopalajo de Arrierez Jun 24 '19 at 15:46
Tree Nguyen , your codepen shows for me the same problem described in the original question. – Sopalajo de Arrierez Jun 24 '19 at 15:47

score 1 · Answer 2 · answered Jun 24 '19 at 00:58

1

You changed the script from the original W3 tutorial. Use the original:

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

answered Jun 24 '19 at 00:58

Mohanad

165
1
1
12

I think you are wrong, Mohanad. The code you posted is from the not animated one version. – Sopalajo de Arrierez Jun 24 '19 at 01:43
You're right! It's the non-animated one. Sorry about that. – Mohanad Jun 24 '19 at 12:23

score 1 · Answer 3 · answered Jun 24 '19 at 00:58

You can make the max-height of the sections max-content instead of setting it to a specific calculated size.

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = 'max-content';
    } 
  });
}

<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>

<h2>Animated Collapsibles</h2>

<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <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>

<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <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>
  <p>Collapsible inside collapsible:</p>
 <button class="collapsible">Open Collapsible inside Collapsible</button>
 <div class="content">
  <p>The Lorem ipsum... etc, thing.</p>
 </div>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <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="collapsible">Open Section 3</button>
<div class="content">
  <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>

Excuse me, but I am not very experienced on JavaScript. Could you please tell me what does `max-content` mean? — Sopalajo de Arrierez, Jun 24 '19 at 01:34
It seems to be working, but the animation is too fast. You could even think there is no animation at all. — Sopalajo de Arrierez, Jun 24 '19 at 01:38
I just realized `max-content` is not supported in some browsers and might be considered "experimental" so you might want to ignore this answer. But you can learn more about it here: https://stackoverflow.com/questions/51285308/how-do-min-content-and-max-content-work — Todd Chaffee, Jun 24 '19 at 01:43
The problem with setting max-height to be max-content is that it will not be able to animate — Tree Nguyen, Jun 24 '19 at 04:35

Animated collapsible inside animated collapsible not working

3 Answers3