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).

Answer 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:

1. 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.
2. 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 ;)

Answer 2

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>

Answer 3

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>