Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Collapse sections with multiple levels

I’m working on a site that needs to expand several sections.

It’s not working correctly:

  1. Section 3.2 is not visible when you open section 3.
  2. When section 3 and 3.1 are both open, and you want to close section 3, the text of section 3.1 is still there.

I think the problem is in the Javascript.

Javascript

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

<script>
var coll = document.getElementsByClassName("collapsible2");
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>

CSS

<style>

body {
  background-color: #000000;
  margin:0;
  padding:0;
  -webkit-tap-highlight-color: transparent;
}

.collapsible {
  background-color: #303030;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Arial;
  font-size: 15px;
  text-align: justify;
  margin-bottom: 1px;
}

.collapsible:focus {
  background-color: #555;
}

.collapsible2 {
  display: none;
  overflow: hidden;
  background-color: #303030;
  color: white;
  cursor: pointer;
  padding: 18px;
  padding-left: 40px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Arial;
  font-size: 15px;
  text-align: justify;
  margin-bottom: 1px;
}

.collapsible2:focus {
  background-color: #555;
}



.content {
  padding: 0 3px;
  display: none;
  overflow: hidden;
  color: white;
  background-color: #000000;
  font-family: Arial;
  font-size: 15px;
  text-align: justify;
}


  
</style>

HTML

<button type="button" class="collapsible">🍎 Section 1</button>

<div class="content"><p>Text here <a href="https://www.test.nl/" class="urltext">link text</a></p></div>

<button type="button" class="collapsible">🍎 Section 2</button>

<div class="content"><p>Text here</p></div>

<button type="button" class="collapsible">🍎 Section 3</button>

<button type="button" class="collapsible2">🍎 Section 3.1</button>

<div class="content"><p>Text here</p></div>

<button type="button" class="collapsible2">🍎 Section 3.2</button>

<div class="content"><p>Text here</p></div>
Tags:

3

Answers


  1. 0

    The problem is with var content = this.nextElementSibling;. This will find only single next sibling. So you are not seeing the next to next sibling toggling

    You should properly add containers for each of this expendables and create a parent child relation. For example a container can be for the container showing section 3 and all sub sections will be child of this container.

    In your current approch all the dom elements are sibling of each other

    Login or Signup to reply.
  2. 0

    I think the problem is in the Javascript.

    The problem is in both html and javascript. To be able to correctly distinguish between section you need to alter your html as well.

    Here is one of the examples of how you can arrange and make corrections in the code.

    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.classList.contains('collapsible2')) {
      [...this.parentElement.getElementsByClassName('collapsible2')].forEach(function(elem) {
        if (elem.style.display === "block") {
          elem.style.display = "none";
          elem.nextElementSibling.style.display = "none";
        } else {
          elem.style.display = "block";
        }
      });
    } else {
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    }
  });
}

var coll2 = document.getElementsByClassName("collapsible2");
var i2;

for (i2 = 0; i2 < coll2.length; i2++) {
  coll2[i2].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";
    }
  });
}
    body {
  background-color: #000000;
  margin:0;
  padding:0;
  -webkit-tap-highlight-color: transparent;
}

.collapsible {
  background-color: #303030;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Arial;
  font-size: 15px;
  text-align: justify;
  margin-bottom: 1px;
}

.collapsible:focus {
  background-color: #555;
}

.collapsible2 {
  display: none;
  overflow: hidden;
  background-color: #303030;
  color: white;
  cursor: pointer;
  padding: 18px;
  padding-left: 40px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Arial;
  font-size: 15px;
  text-align: justify;
  margin-bottom: 1px;
}

.collapsible2:focus {
  background-color: #555;
}



.content {
  padding: 0 3px;
  display: none;
  overflow: hidden;
  color: white;
  background-color: #000000;
  font-family: Arial;
  font-size: 15px;
  text-align: justify;
}
    <div class="sectionWrapper">
  <button type="button" class="collapsible">&#127822; Section 1</button>
  <div class="content">
    <p>Text here <a href="https://www.test.nl/" class="urltext">link text</a></p>
  </div>
</div>

<div class="sectionWrapper">
  <button type="button" class="collapsible">&#127822; Section 2</button>

  <div class="content">
    <p>Text here</p>
  </div>
</div>

<div class="sectionWrapper">
  <button type="button" class="collapsible">&#127822; Section 3</button>

  <button type="button" class="collapsible2">&#127822; Section 3.1</button>

  <div class="content">
    <p>Text here</p>
  </div>

  <button type="button" class="collapsible2">&#127822; Section 3.2</button>

  <div class="content">
    <p>Text here</p>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    It is pointless to write your own nested accordian when there’s a myriad of them available online.

    Here is an example of one: https://tympanus.net/codrops/2013/03/29/nested-accordion/

    Here is another in Bootstrap 5: https://www.codepel.com/bootstrap/bootstrap-5-nested-accordion/

    Take one of those and rework your content into it (or find another one on Codepen or similar).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search