Daily Archives: June 8, 2020

JavaScript/CSS/HTML || Collapsible.js – Simple Collapsible Accordion Panel Using Vanilla JavaScript

Accordion panels are a vertical stack of items. Each item can be “expanded” or “collapsed” to reveal the content associated with that item. There can be zero expanded items, or more than one item expanded at a time, depending on the configuration.

Using JavaScript, the following is sample code which demonstrates how to display a simple collapsible accordion panel to the page.

This panel comes with a few basic features. Using data attributes, you can adjust the slide up and slide down speed, as well as the initial collapsed status. You can also specify either the entire row as selectable, or just the button.

Collapsible.js & CSS Source

Contents

1. Basic Usage
2. Collapsible HTML
3. Collapsible.js & CSS Source
4. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates the JavaScript used to setup the elements decorated with the ‘collapsible‘ CSS class.


2. Collapsible HTML

The following is an example of the HTML used to display the collapsible.

To make the entire row clickable, only add the ‘collapsible‘ class to the ‘collapsible-header‘ element. To make just the button clickable, only add the ‘collapsible‘ class to the ‘collapsible-button‘ element

Sample:

Sample


3. Collapsible.js & CSS Source

The following is the Collapsible.js Namespace & CSS Source. Include this in your project to start using!

The following is Collapsible.css.


4. More Examples

Below are more examples demonstrating the use of ‘Collapsible.js‘. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.