JavaScript Technique: Collapse Or Expand Multiple Sections Of A Web Page Simultaneously

Last reviewed/updated: 02 May 2016 | Published: 26 Apr 2014 | Status: Active

1. Introduction

Collapsing/expanding multiple sections of a web page simultaneously with JavaScript is a technique for dynamically changing the displayed content of a web page. Some notes on this example:

The web page sections are displayed by default. To not display the web page sections by default, change the HTML source code lines 13, 19, and 25 to <div style="display:none" class="sectionSelector">.
The HTML element style attribute is exposed on the DOM as the JavaScript style object. The JavaScript style object gets/sets the HTML element style attribute value from/on the DOM. Specifically, assigning the JavaScript style object to a JavaScript variable gets the HTML element style attribute value from the DOM, and assigning a value to the JavaScript style object sets the HTML element style attribute value on the DOM.

1.1. Demonstration

Demonstration: JavaScript Technique: Collapse Or Expand Multiple Sections Of A Web Page Simultaneously (learnwebcoding.com).

1.2. Web Browser Support

Web browser support: IE8+, ED12+, FF3.5+, SF3.1+, CH2+, OP10+.

1.3. How To Try This Example On Your Computer

To try this example on your computer:

Download the following source files to the same drive or folder on your computer:
Double click the .html file.

1.4. Abbreviations

IE = Internet Explorer.
ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
FF = Firefox.
SF = Safari.
CH = Chrome.
OP = Opera.

2. Collapse Or Expand Multiple Sections Of A Web Page Simultaneously

2.1. HTML Source Code And Notes

HTML source code: collapse_expand_all.html (learnwebcoding.com):

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>JavaScript Technique: Collapse Or Expand Multiple Sections Of A Web Page Simultaneously</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="collapse_expand_all.css" />
  <script src="collapse_expand_all.js"></script>
 </head>
 <body>
  <h2>JavaScript Technique: Collapse Or Expand Multiple Sections Of A Web Page Simultaneously</h2>
  <p><span class="interactive-object" onclick="CollapseExpandAllUtil.collapseExpandAll('expandAll')">Expand All (default)</span> | <span class="interactive-object" onclick="CollapseExpandAllUtil.collapseExpandAll('collapseAll')">Collapse All</span></p>
  <p>Optional Section 1 Title</p>
  <div class="sectionSelector">
   <p>Section 1 content.<br />
   Section 1 content.<br />
   Section 1 content.</p>
  </div>
  <p>Optional Section 2 Title</p>
  <div class="sectionSelector">
   <p>Section 2 content.<br />
   Section 2 content.<br />
   Section 2 content.</p>
  </div>
  <p>Optional Section 3 Title</p>
  <div class="sectionSelector">
   <p>Section 3 content.<br />
   Section 3 content.<br />
   Section 3 content.</p>
  </div>
  <p>Web browser support: IE8+, ED12+, FF3.5+, SF3.1+, CH2+, OP10+.</p>
 </body>
</html>

HTML source code notes:

Line 11: Creates two interactive objects that look and behave like hyperlinks, but are styled text.
Hyperlinks can be used instead of interactive objects. However, when not navigating to a different path/URI upon the click event (as in this example), using interactive objects instead of hyperlinks avoids, among other things, unnecessarily triggering the web browser window status bar, which keeps the web browser window interface clean.
Line 11: The span element onclick attribute assigns/registers an event handler for the span element click event. Specifically, the value assigned to the span element onclick attribute is the event handler for the span element click event. In this example, for both interactive objects, the span element onclick attribute is assigned the CollapseExpandAllUtil.collapseExpandAll() value. Therefore, for both interactive objects, the CollapseExpandAllUtil.collapseExpandAll() method is the event handler for the span element click event.
Line 11: Clicking either interactive object calls the CollapseExpandAllUtil.collapseExpandAll() method and passes it a value. The value passed into the CollapseExpandAllUtil.collapseExpandAll() method indicates which interactive object was clicked/the action to perform. If the Collapse all interactive object is clicked, the "collapseAll" string value is passed. If the Expand all interactive object is clicked, the "expandAll" string value is passed.
Lines 13, 19, and 25: An element class attribute specifies a selector that serves as an identifier for the element. Specifically, the value assigned to the element class attribute is the element identifier. In this example, the div element class attribute is assigned the sectionSelector value. Therefore, sectionSelector is the div element identifier.

2.2. CSS Source Code And Notes

CSS source code: collapse_expand_all.css (learnwebcoding.com):

.interactive-object {
  text-decoration: underline;
}
.interactive-object:hover {
  color: #999;
  cursor: pointer;
}

CSS source code notes:

Styles the interactive objects.
Not involved in dynamically changing the displayed content of the web page.

2.3. JavaScript Source Code And Notes

JavaScript source code: collapse_expand_all.js (learnwebcoding.com):

var CollapseExpandAllUtil = {
 collapseExpandAll: function(actionToPerform){
  var allSectionsReference = document.querySelectorAll(".sectionSelector");
  var len = allSectionsReference.length;
  for (var i = 0; i < len; i++){
   var sectionReference = allSectionsReference[i];
   switch (actionToPerform){
    case "collapseAll":
     sectionReference.style.display = "none";
     break;
    case "expandAll":
     sectionReference.style.display = "block";
     break;
   }
  }
 }
};

JavaScript source code notes:

Line 1: Defines CollapseExpandAllUtil as an object literal.
Line 2: Defines the collapseExpandAll() function as a method of the CollapseExpandAllUtil object.
Line 2: Defines actionToPerform as an argument of the CollapseExpandAllUtil.collapseExpandAll() method. The value passed into the CollapseExpandAllUtil.collapseExpandAll() method is assigned to actionToPerform. actionToPerform is a local variable.
Line 3: Gets a reference to all elements with the class="sectionSelector" attribute, and assigns the reference (a static NodeList object) to allSectionsReference. allSectionsReference is a local variable.
Line 4: Gets the number of nodes in the allSectionsReference NodeList, and assigns the number to len. len is a local variable.
Lines 5 and 6: Iterates over each node reference in the allSectionsReference NodeList, and assigns each node reference (in this example, an HTMLDivElement object) to sectionReference. sectionReference is a local variable.
Lines 7 - 13: Evaluates actionToPerform and compares it to each case value. If actionToPerform is identically equal to the string value "collapseAll", execute lines 9 and 10. If actionToPerform is identically equal to the string value "expandAll", execute lines 12 and 13.
Line 9: Assigns display = "none" to the JavaScript sectionReference.style object, which sets style="display:none" on the DOM for each HTML element with the class="sectionSelector" attribute. This constitutes a CSS inline style and collapses/does not display the content of each HTML element with the class="sectionSelector" attribute.
Line 12: Assigns display = "block" to the JavaScript sectionReference.style object, which sets style="display:block" on the DOM for each HTML element with the class="sectionSelector" attribute. This constitutes a CSS inline style and expands/displays the content of each HTML element with the class="sectionSelector" attribute.
Lines 10 and 13: Causes the JavaScript execution to exit the switch statement. In this example, the JavaScript execution then proceeds with either another iteration of the for loop, or, upon finishing the for loop, exits the CollapseExpandAllUtil.collapseExpandAll() method.

3. Resources And Additional Information

JavaScript Techniques (learnwebcoding.com)