JavaScript button for displaying and hiding all content in one click

Question

JavaScript button for displaying and hiding all content in one click

I came across a tutorial on W3Schools that showed how to create collapsibles, and I thought it would be great to have buttons that could expand or collapse all at once. I've been trying to implement this feature using the code provided in the tutorial but seem to be struggling with getting two working buttons. Here is the snippet of code I am currently working with.

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

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

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

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

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

javascript html css

Answer 1

Answer №1

Is this the outcome you're aiming for? Using jQuery, here's an example that you can customize to suit your needs.

$('.item').on('click', '.header', function(){
  $('.item').removeClass('show')
  $(this).parent().toggleClass('show')
})

.item {
  border: 1px solid #ddd;
  margin: 5px;
}
.header {
  padding: 10px;
  cursor: pointer;
}
.content {
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  border-top: 1px solid #ddd;
}
.item.show .content {
  height: auto;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class='item'>
  <div class='header'>Item 1</div>
  <div class='content'>Content 1</div>
</section>

<section class='item'>
  <div class='header'>Item 1</div>
  <div class='content'>Content 2</div>
</section>

Answer 2

Is this the outcome you're aiming for? Using jQuery, here's an example that you can customize to suit your needs.

$('.item').on('click', '.header', function(){
  $('.item').removeClass('show')
  $(this).parent().toggleClass('show')
})

.item {
  border: 1px solid #ddd;
  margin: 5px;
}
.header {
  padding: 10px;
  cursor: pointer;
}
.content {
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  border-top: 1px solid #ddd;
}
.item.show .content {
  height: auto;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class='item'>
  <div class='header'>Item 1</div>
  <div class='content'>Content 1</div>
</section>

<section class='item'>
  <div class='header'>Item 1</div>
  <div class='content'>Content 2</div>
</section>

Answer 3

Answer №2

This is the extended version of your code.

I believe this fulfills your request

var elements = document.getElementsByClassName("collapsible");
var j;

for (j = 0; j < elements.length; j++) 
{
  elements[j].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";
    } 
  });
}

var expAllButton = document.getElementById('expAll');
    expAllButton.addEventListener('click', function() {
      expandDetails(true);
    }, false);

    var collAllButton = document.getElementById('collAll');
    collAllButton.addEventListener('click', function() {
      expandDetails(false);
    }, false);

    function expandDetails(y) {
      var infoSections = document.getElementsByClassName("collapsible");
      Array.from(infoSections).forEach(span => {
        var content = span.nextElementSibling;
        var conditionCheck;
        var resultValue;
        switch (y) {
          case false:
            conditionCheck=content.style.maxHeight == content.scrollHeight + "px";
            resultValue=null;
            break;
          case true:
            conditionCheck=content.style.maxHeight == null || content.style.maxHeight == "";
            resultValue=content.scrollHeight + "px";
            break;
          default:
        }
        if (conditionCheck) {
          span.classList.toggle("active");
          content.style.maxHeight = resultValue;
        }
      });
    }

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

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

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

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

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>

<a href='#8' id='expAll'>Expand All</a>
<a href='#9' id='collAll'>Collapse All<br></a>

</head>

<body>
<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>
</body>
</html>

Answer 4

This is the extended version of your code.

I believe this fulfills your request

var elements = document.getElementsByClassName("collapsible");
var j;

for (j = 0; j < elements.length; j++) 
{
  elements[j].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";
    } 
  });
}

var expAllButton = document.getElementById('expAll');
    expAllButton.addEventListener('click', function() {
      expandDetails(true);
    }, false);

    var collAllButton = document.getElementById('collAll');
    collAllButton.addEventListener('click', function() {
      expandDetails(false);
    }, false);

    function expandDetails(y) {
      var infoSections = document.getElementsByClassName("collapsible");
      Array.from(infoSections).forEach(span => {
        var content = span.nextElementSibling;
        var conditionCheck;
        var resultValue;
        switch (y) {
          case false:
            conditionCheck=content.style.maxHeight == content.scrollHeight + "px";
            resultValue=null;
            break;
          case true:
            conditionCheck=content.style.maxHeight == null || content.style.maxHeight == "";
            resultValue=content.scrollHeight + "px";
            break;
          default:
        }
        if (conditionCheck) {
          span.classList.toggle("active");
          content.style.maxHeight = resultValue;
        }
      });
    }

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

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

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

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

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>

<a href='#8' id='expAll'>Expand All</a>
<a href='#9' id='collAll'>Collapse All<br></a>

</head>

<body>
<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>
</body>
</html>

JavaScript button for displaying and hiding all content in one click

Answer №1

Answer №2

Similar questions

Encountering the error "TypeError: Unable to access property 'controls' of undefined" when utilizing formArray in Reactive forms

Transform object into JSON format

Unable to insert hyperlinks into table rows within a React application

Changing the mouse cursor dynamically with Angular programming

Exploring how to replicate background-size: cover with a center position using HTML5's <video> tag

Display Quantity of Current Website Visitors

Interaction between index file and module instance

Modify the divs in two separate occasions when submitting different forms

Is there a method to verify the consumability of an API without having to make a direct request to it?

The unrevealed node that is requesting the module is leading to an undefined outcome

Rzslider not functioning properly due to CSS issues

JavaScript's Selenium WebDriver - Explicit Waiting

Vue js for filtering and replacing prohibited words

Having trouble getting CSS media query to work in my Rails mailer template

The AreaChart in Google is displaying incorrect dates on the axis

Python code to locate images within HTML source code

Utilizing jQuery to assign a value to a SPAN tag

I am in search of a specialized 3D camera with a unique effect

Enable users to provide ratings ranging from 0.5 up to 5

Unraveling a Java String with HTML elements into a JsonObject: Step-by-step Guide