Guide to setting up collapsible sections within a parent collapsible

Question

Guide to setting up collapsible sections within a parent collapsible

I came across this animated collapsible code that I'm using:

https://www.w3schools.com/howto/howto_js_collapsible.asp

Here is the HTML:

<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

CSS:

/* Styling for the button used to open and close the collapsible content */

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Background color change when clicked or hovered */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Styles for the collapsible content. Initially hidden */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

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.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

I am trying to add another collapsible button inside the first dropdown. However, currently, my nested button only changes to a minus sign when clicked. Here is the HTML:

<button type="button" class="collapsible">Options:</button>
<div class="content">
    <button class="collapsible">Check</button>
    <div id="content"> 
        TEST 
    </div>
</div>

The CSS and JS remain the same as in the provided link.

javascript html css

Answer 1

Answer №1

To achieve the desired effect of animating the main container, I first created a loop to calculate the height of all elements with the class content. This total height is then set as the max-height for the main container. While using CSS display properties like block and none could also hide and show content, I chose to implement this JavaScript logic for a dynamic animation.

var allHeights = 0;
var contents = document.getElementsByClassName("content");
var j;

for (j = 0; j < contents.length; j++) {
  var h = document.getElementsByClassName("content")[j].scrollHeight;
  allHeights += h;
}

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 == allHeights + "px"){
      content.style.maxHeight = "0px";
    } else {
      content.style.maxHeight = allHeights + "px";
    }
  });
}

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

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

.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

<button type="button" class="collapsible">First 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>
  
  <button type="button" class="collapsible">Second 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>

  <button type="button" class="collapsible">Third 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>
  
</div>

Answer 2

To achieve the desired effect of animating the main container, I first created a loop to calculate the height of all elements with the class content. This total height is then set as the max-height for the main container. While using CSS display properties like block and none could also hide and show content, I chose to implement this JavaScript logic for a dynamic animation.

var allHeights = 0;
var contents = document.getElementsByClassName("content");
var j;

for (j = 0; j < contents.length; j++) {
  var h = document.getElementsByClassName("content")[j].scrollHeight;
  allHeights += h;
}

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 == allHeights + "px"){
      content.style.maxHeight = "0px";
    } else {
      content.style.maxHeight = allHeights + "px";
    }
  });
}

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

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

.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

<button type="button" class="collapsible">First 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>
  
  <button type="button" class="collapsible">Second 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>

  <button type="button" class="collapsible">Third 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>
  
</div>

Answer 3

Answer №2

You have an error in the nested content within the div element. Instead of using id="content", it should be class="content" in order for it to work properly. Please refer to the code snippet provided below.

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

/* Define styling for the button used to toggle hidden content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Set background color when button is active or hovered over */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Customize the appearance of collapsible content */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

<button type="button" class="collapsible">Options:</button>
<div class="content">
    <button type="button" class="collapsible">Check</button>
    <div class="content"> 
        TEST 
    </div>
</div>

Answer 4

You have an error in the nested content within the div element. Instead of using id="content", it should be class="content" in order for it to work properly. Please refer to the code snippet provided below.

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

/* Define styling for the button used to toggle hidden content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Set background color when button is active or hovered over */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Customize the appearance of collapsible content */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

<button type="button" class="collapsible">Options:</button>
<div class="content">
    <button type="button" class="collapsible">Check</button>
    <div class="content"> 
        TEST 
    </div>
</div>

Guide to setting up collapsible sections within a parent collapsible

Answer №1

Answer №2

Similar questions

A more concise approach to crafting ajax requests

Quick CSS tweak

React - using dangerouslySetInnerHTML does not display the expected output

How can I trigger the appearance of the navigation bar when reaching the second div while scrolling

Ways to switch out error message for an error landing page

Passing a state object in a POST request body, only to find it arriving empty at the Express server

Customizing alert message styles in Java script: Changing color and font of specific parts

Easiest and quickest method to retrieve metadata from a website

Tips for modifying the color of a specific section of the border within a table

Tips for effectively utilizing an autocomplete input field with Vue that draws information from a database source

Tips on accessing the returned value from the controller within a JSP page using Ajax

Manipulating data rows in a table using jquery

The integration of cypress-cucumber-preprocessor with multiple testing frameworks appears to be experiencing compatibility issues

Issue with jquery .click function not triggering after CSS adjustment

Enable content to be displayed when hovering over it with a mouse in

In JavaScript, combine two arrays of equal length to create a new array object value

What is the best way to extract keys from a hash in Ruby using a Javascript string?

Update the table contents smoothly using the html helper PagedListPager without having to reload the entire

Unusual $http Angular.js POST inquiry

What is the best way to choose a specific section of a string using JQuery?