0

I'm building a new html web page where I'll have nested collapsibles. I'm using the code from W3school for it. I can't understand tho why when nesting collapsibles the nested one doesn't open when clicked.

In my chapter 1 example when the button is clicked the collapsible becomes active and gives it's content a max height. However when the chapter 1.1 becomes clicked it's collapsible becomes active and gives height to the content but the content can't be seen.

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 article page content */

#main {
  background: #F4F4F4;
  margin: 0 auto;
  max-width: 1024px;
}

#page {
  margin-top: 5em;
  background-color: white;
  padding: 15px 3em 15px 3em;
}

.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;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="jquery-3.3.1.min.js"></script>
</head>

<body>
  <div id="main">

    <p>Article 1</p>
    <button class="collapsible">Abstract</button>
    <div class="content">
      <p>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis lacinia neque ac bibendum. Vivamus consectetur, purus et semper vehicula, nisi nunc maximus metus, sit amet convallis metus est a nisi. Cras ut orci non lacus venenatis imperdiet.
        Curabitur condimentum vulputate mattis. Pellentesque vitae sodales massa. Vivamus a ullamcorper nunc. Integer ultrices commodo lorem in iaculis. Nulla cursus vitae odio vitae ultricies. Donec ligula nisi, maximus quis metus ac, viverra pellentesque
        turpis. In suscipit mi at lorem varius pulvinar. Quisque tincidunt leo sed finibus viverra. Vestibulum pharetra condimentum leo. Aliquam tortor arcu, viverra a dui et, hendrerit auctor magna. Proin dictum pulvinar lectus ac tristique. Aliquam
        dictum condimentum massa a tincidunt. Etiam ultricies luctus finibus. Suspendisse feugiat risus cursus nisl viverra sagittis. In commodo diam tristique erat varius, ac rutrum leo molestie. Donec ut lectus tincidunt tortor vestibulum molestie nec
        sed ante. Curabitur vitae neque laoreet, faucibus ante nec, egestas nulla. Ut id mi enim. Pellentesque posuere, dolor sit amet gravida congue, justo quam pulvinar lectus, sed malesuada quam felis sed nisi. Donec auctor purus non dolor sagittis,
        id rutrum velit tempor. Aliquam non mattis nibh, nec feugiat metus. Vestibulum accumsan turpis est, porta tempor nunc gravida a. Nam eros ante, eleifend nec augue sit amet, feugiat auctor mauris. Nulla facilisi. Nulla eget egestas risus. Quisque
        sit amet rutrum ligula, dictum consequat eros. Morbi elementum libero a nunc viverra, sit amet cursus sem eleifend. Praesent neque lorem, suscipit in augue id, efficitur faucibus nibh. Vivamus vel nulla at tortor feugiat sollicitudin. Phasellus
        pharetra hendrerit massa eget ornare. Nullam tortor sapien, laoreet sed consequat at, egestas sit amet erat. Praesent in varius tellus. Ut venenatis, augue sit amet faucibus tristique, velit lacus ultrices magna, quis accumsan metus purus ultrices
        nibh. Donec dapibus tellus eu pharetra viverra. Nullam varius mollis velit, quis consequat diam venenatis et. Maecenas interdum, velit vel gravida euismod, enim orci lobortis justo, quis lobortis libero eros venenatis est. Sed laoreet, diam at
        tempus sollicitudin, sapien velit gravida elit, ut sodales augue elit eu elit. Morbi sit amet porta neque. Maecenas mi augue, maximus vitae facilisis at, volutpat at quam. Nunc ac ante tempus nibh ornare euismod. Curabitur sagittis egestas nunc,
        at pretium magna blandit vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nisl eros, rutrum ac gravida nec, gravida a erat. Morbi fringilla facilisis velit eget pharetra. Aliquam molestie,
        tellus fermentum sagittis egestas, ex neque sodales justo, non eleifend lacus risus ut velit. </p>
    </div>
    <button class="collapsible">Introduction</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">Chapter 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>
      <button class="collapsible">Chapter 1.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>
      </div>
    </div>
  </div>

</body>

</html>
Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
D.duarte
  • 13
  • 1
  • 5

2 Answers2

0

I see problem with your max-height in last collapsible there is fixed max-height set when you opening it. When opening child collapsible there is not enough space for child to be opened. I have changed code to fixed 300px max-height and it works as expected. You should calculate max-height different to take into consideration also child elements.

You can use max-height to set to some value larger than your content to have it always work. See options to animate from max-height:0 to max-height:auto here: How can I transition height: 0; to height: auto; using CSS?

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 = "300px";
    }
  });
}
/* Style article page content */

#main {
  background: #F4F4F4;
  margin: 0 auto;
  max-width: 1024px;
}

#page {
  margin-top: 5em;
  background-color: white;
  padding: 15px 3em 15px 3em;
}

.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;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="jquery-3.3.1.min.js"></script>
</head>

<body>
  <div id="main">

    <p>Article 1</p>
    <button class="collapsible">Abstract</button>
    <div class="content">
      <p>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis lacinia neque ac bibendum. Vivamus consectetur, purus et semper vehicula, nisi nunc maximus metus, sit amet convallis metus est a nisi. Cras ut orci non lacus venenatis imperdiet.
        Curabitur condimentum vulputate mattis. Pellentesque vitae sodales massa. Vivamus a ullamcorper nunc. Integer ultrices commodo lorem in iaculis. Nulla cursus vitae odio vitae ultricies. Donec ligula nisi, maximus quis metus ac, viverra pellentesque
        turpis. In suscipit mi at lorem varius pulvinar. Quisque tincidunt leo sed finibus viverra. Vestibulum pharetra condimentum leo. Aliquam tortor arcu, viverra a dui et, hendrerit auctor magna. Proin dictum pulvinar lectus ac tristique. Aliquam
        dictum condimentum massa a tincidunt. Etiam ultricies luctus finibus. Suspendisse feugiat risus cursus nisl viverra sagittis. In commodo diam tristique erat varius, ac rutrum leo molestie. Donec ut lectus tincidunt tortor vestibulum molestie nec
        sed ante. Curabitur vitae neque laoreet, faucibus ante nec, egestas nulla. Ut id mi enim. Pellentesque posuere, dolor sit amet gravida congue, justo quam pulvinar lectus, sed malesuada quam felis sed nisi. Donec auctor purus non dolor sagittis,
        id rutrum velit tempor. Aliquam non mattis nibh, nec feugiat metus. Vestibulum accumsan turpis est, porta tempor nunc gravida a. Nam eros ante, eleifend nec augue sit amet, feugiat auctor mauris. Nulla facilisi. Nulla eget egestas risus. Quisque
        sit amet rutrum ligula, dictum consequat eros. Morbi elementum libero a nunc viverra, sit amet cursus sem eleifend. Praesent neque lorem, suscipit in augue id, efficitur faucibus nibh. Vivamus vel nulla at tortor feugiat sollicitudin. Phasellus
        pharetra hendrerit massa eget ornare. Nullam tortor sapien, laoreet sed consequat at, egestas sit amet erat. Praesent in varius tellus. Ut venenatis, augue sit amet faucibus tristique, velit lacus ultrices magna, quis accumsan metus purus ultrices
        nibh. Donec dapibus tellus eu pharetra viverra. Nullam varius mollis velit, quis consequat diam venenatis et. Maecenas interdum, velit vel gravida euismod, enim orci lobortis justo, quis lobortis libero eros venenatis est. Sed laoreet, diam at
        tempus sollicitudin, sapien velit gravida elit, ut sodales augue elit eu elit. Morbi sit amet porta neque. Maecenas mi augue, maximus vitae facilisis at, volutpat at quam. Nunc ac ante tempus nibh ornare euismod. Curabitur sagittis egestas nunc,
        at pretium magna blandit vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nisl eros, rutrum ac gravida nec, gravida a erat. Morbi fringilla facilisis velit eget pharetra. Aliquam molestie,
        tellus fermentum sagittis egestas, ex neque sodales justo, non eleifend lacus risus ut velit. </p>
    </div>
    <button class="collapsible">Introduction</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">Chapter 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>
      <button class="collapsible">Chapter 1.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>
      </div>
    </div>
  </div>

</body>

</html>
Łukasz Blaszyński
  • 1,536
  • 1
  • 8
  • 13
0

The reason your are not seeing the content of chapter 1.1 is because the max-height of the parent collapsible. You may need to consider change the parent max-height when the case applies.

Next you can see an example on the JS.

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";

      if (content.parentElement.className == "content") {
        let parent = content.parentElement;
        let parentHeight = parent.style.getPropertyValue("max-height").replace("px");
        let newParentHeight = parseInt(parentHeight) + parseInt(content.scrollHeight);

        parent.style.setProperty("max-height", `${newParentHeight}px`);
      }
    }
  });
}
/* Style article page content */

#main {
  background: #F4F4F4;
  margin: 0 auto;
  max-width: 1024px;
}

#page {
  margin-top: 5em;
  background-color: white;
  padding: 15px 3em 15px 3em;
}

.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;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="jquery-3.3.1.min.js"></script>
</head>

<body>
  <div id="main">

    <p>Article 1</p>
    <button class="collapsible">Abstract</button>
    <div class="content">
      <p>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis lacinia neque ac bibendum. Vivamus consectetur, purus et semper vehicula, nisi nunc maximus metus, sit amet convallis metus est a nisi. Cras ut orci non lacus venenatis imperdiet.
        Curabitur condimentum vulputate mattis. Pellentesque vitae sodales massa. Vivamus a ullamcorper nunc. Integer ultrices commodo lorem in iaculis. Nulla cursus vitae odio vitae ultricies. Donec ligula nisi, maximus quis metus ac, viverra pellentesque
        turpis. In suscipit mi at lorem varius pulvinar. Quisque tincidunt leo sed finibus viverra. Vestibulum pharetra condimentum leo. Aliquam tortor arcu, viverra a dui et, hendrerit auctor magna. Proin dictum pulvinar lectus ac tristique. Aliquam
        dictum condimentum massa a tincidunt. Etiam ultricies luctus finibus. Suspendisse feugiat risus cursus nisl viverra sagittis. In commodo diam tristique erat varius, ac rutrum leo molestie. Donec ut lectus tincidunt tortor vestibulum molestie nec
        sed ante. Curabitur vitae neque laoreet, faucibus ante nec, egestas nulla. Ut id mi enim. Pellentesque posuere, dolor sit amet gravida congue, justo quam pulvinar lectus, sed malesuada quam felis sed nisi. Donec auctor purus non dolor sagittis,
        id rutrum velit tempor. Aliquam non mattis nibh, nec feugiat metus. Vestibulum accumsan turpis est, porta tempor nunc gravida a. Nam eros ante, eleifend nec augue sit amet, feugiat auctor mauris. Nulla facilisi. Nulla eget egestas risus. Quisque
        sit amet rutrum ligula, dictum consequat eros. Morbi elementum libero a nunc viverra, sit amet cursus sem eleifend. Praesent neque lorem, suscipit in augue id, efficitur faucibus nibh. Vivamus vel nulla at tortor feugiat sollicitudin. Phasellus
        pharetra hendrerit massa eget ornare. Nullam tortor sapien, laoreet sed consequat at, egestas sit amet erat. Praesent in varius tellus. Ut venenatis, augue sit amet faucibus tristique, velit lacus ultrices magna, quis accumsan metus purus ultrices
        nibh. Donec dapibus tellus eu pharetra viverra. Nullam varius mollis velit, quis consequat diam venenatis et. Maecenas interdum, velit vel gravida euismod, enim orci lobortis justo, quis lobortis libero eros venenatis est. Sed laoreet, diam at
        tempus sollicitudin, sapien velit gravida elit, ut sodales augue elit eu elit. Morbi sit amet porta neque. Maecenas mi augue, maximus vitae facilisis at, volutpat at quam. Nunc ac ante tempus nibh ornare euismod. Curabitur sagittis egestas nunc,
        at pretium magna blandit vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nisl eros, rutrum ac gravida nec, gravida a erat. Morbi fringilla facilisis velit eget pharetra. Aliquam molestie,
        tellus fermentum sagittis egestas, ex neque sodales justo, non eleifend lacus risus ut velit. </p>
    </div>
    <button class="collapsible">Introduction</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">Chapter 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>
      <button class="collapsible">Chapter 1.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>
      </div>
    </div>
  </div>

</body>

</html>
James Garcia
  • 186
  • 6