Dynamic collapsible containers

Question

Dynamic collapsible containers

I discovered a useful feature on w3schools for collapsing elements: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol

However, I would like to reverse it so that all elements are initially shown when the page loads, and then use this feature to toggle between visible and hidden states.

Below is the code I currently have:

<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 12px;
}

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

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

.content {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
<script>
    $(document).ready(function() {
        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";
            } 
          });
        }
    });
</script>

You can see an example of this implementation here: https://jsfiddle.net/g50v4cL2/

My goal is to have the elements shown as depicted in the image below when the page loads:

https://i.sstatic.net/ZuvG4.png

Afterward, I should be able to collapse and expand them at will. Can anyone assist me with achieving this?

Thank you for your help.

javascript html css

Answer 1

Answer №1

There are numerous methods to achieve this, but in this particular scenario, I opted to retain the existing structure with minimal modifications. Simply add the active class to your elements and adjust your JavaScript code as follows:

        var coll = document.getElementsByClassName("collapsible");
        var i;

        const adjustContentHeight = (content) => {
          if (content.style.maxHeight){
              content.style.maxHeight = null; 
          } else {
              content.style.maxHeight = content.scrollHeight + "px";
          }
        }

        for (i = 0; i < coll.length; i++) {
          adjustContentHeight(coll[i].nextElementSibling);
    
          coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            adjustContentHeight(this.nextElementSibling);
          }); 
        }

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 12px;
}

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

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

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

<button class='collapsible active'>Test1</button>
<div class='content'>
<label><input type = 'checkbox' value = 'value1'/> value1</label>
<label><input type = 'checkbox' value = 'value2'/> value2</label>
<label><input type = 'checkbox' value = 'value3'/> value3</label>
<label><input type = 'checkbox' value = 'value4'/> value4</label>
</div>

<button class='collapsible active'>Test2</button>
<div class='content'>
<label><input type = 'checkbox'  value = 'value5'/> value5</label>
<label><input type = 'checkbox'  value = 'value6'/> value6</label>
<label><input type = 'checkbox'  value = 'value7'/> value7</label>
</div>

If you prefer not to have the transition effect at the start, you can eliminate the transition property from the CSS and introduce it in the JavaScript after implementing this code.

Answer 2

There are numerous methods to achieve this, but in this particular scenario, I opted to retain the existing structure with minimal modifications. Simply add the active class to your elements and adjust your JavaScript code as follows:

        var coll = document.getElementsByClassName("collapsible");
        var i;

        const adjustContentHeight = (content) => {
          if (content.style.maxHeight){
              content.style.maxHeight = null; 
          } else {
              content.style.maxHeight = content.scrollHeight + "px";
          }
        }

        for (i = 0; i < coll.length; i++) {
          adjustContentHeight(coll[i].nextElementSibling);
    
          coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            adjustContentHeight(this.nextElementSibling);
          }); 
        }

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 12px;
}

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

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

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

<button class='collapsible active'>Test1</button>
<div class='content'>
<label><input type = 'checkbox' value = 'value1'/> value1</label>
<label><input type = 'checkbox' value = 'value2'/> value2</label>
<label><input type = 'checkbox' value = 'value3'/> value3</label>
<label><input type = 'checkbox' value = 'value4'/> value4</label>
</div>

<button class='collapsible active'>Test2</button>
<div class='content'>
<label><input type = 'checkbox'  value = 'value5'/> value5</label>
<label><input type = 'checkbox'  value = 'value6'/> value6</label>
<label><input type = 'checkbox'  value = 'value7'/> value7</label>
</div>

If you prefer not to have the transition effect at the start, you can eliminate the transition property from the CSS and introduce it in the JavaScript after implementing this code.

Dynamic collapsible containers

Answer №1

Similar questions

React: An error has occurred - Properties cannot be read from an undefined value

Dealing with bulkWrites in Mongoose and MongoDB: how to handle cast errors with finesse

Gradually blend the section of the picture with an image banner after 20 seconds

The subscription for the second Observable in RxJS concatMap is triggered individually

django, the X-CSRFToken in the request header is improperly configured

Show a pop-up notification for a compact disc

Notification for Unsuccessful Login Attempt on the Client Side

AngularJS implementation for a confirmation dialog with data

Retrieve the origin of the copied text

Conceal elements on smaller screens using the Bootstrap 5 grid system

The v-model in the Vue data() object input is not functioning properly and requires a page refresh to work correctly

Capture Video on iOS devices using the MediaRecorder API and display it using HTML5 Video Player

Trouble with Chrome's CSS making table cell display as block

Please ensure all three of the last checkboxes are ticked before finalizing submission

create new Exception( "Invalid syntax, expression not recognized: " msg );

Webpack loaders or plugins: understanding the distinction

Adding a new key-value pair to a JSON data structure

Is it possible to stack images on top of each other on a webpage?

Preventing Page Refresh when Button is Clicked in Angular

The navigation bar and column layout is not functioning properly in Firefox