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

I've been struggling with this javascript error for three days, how can I finally resolve it?

What is the best way to retrieve a GWT textbox value using Selenium WebDriver?

Issue with collecting data in Meteor Collection

Animating with React using the animationDelay style does not produce the desired effect

What is the best way to upload an object in React using fetch and form-data?

Tips for effectively downsizing an HTML Canvas to achieve high-quality images

Send the Children prop to the React Memo component

Effortless Ways to Automatically Accept SSL Certificates in Chrome

What steps can be taken to ensure that a dropdown menu responds instantly to the JavaScript code provided?

JavaFX text label does not adjust its font according to the CSS file

The ref.on() method fails to trigger a response from a function, despite producing the intended outcome

Enhance the appearance of your Dojo TabContainer when viewing in Internet Explorer

Nuxt and Express server are unable to receive API requests when in production mode and the /dist directory

What are the capabilities of Ajax when it comes to utilizing select controls in J

What is the process for extracting specific text from a web page source using Python with Selenium?

What are some effective methods for selectively handling batches of 5-20k document inputs when adding them to a collection containing up to one million documents using MongoDB and Mongoose?

Utilizing the powerful combination of TailwindCSS and Next.js Image to achieve a full height display with

Ensuring Valid Submission: Utilizing Jquery for a Straightforward Form Submission with 'Alajax'

Is it possible to retrieve the complete file path in a form?

Searching for attributes in a JSON document