Spectre Accordions

The Spectre Accordions provide simple accordion by extending the panel component. The use of the data-parent attribute to makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible items is display.

Alternatively, you can use details and summary instead of input radio or checkbox trick. Add the open attribute to details to expand it. Microsoft Edge support is under consideration. 

Spectre Accordions Class:

• accordion: This class used to create the accordion elements.

Note: You need to include the accordion-1 as an id in the input field where you will attach the icon for down fall.

Syntax:

 <div class="accordion">
 ...
 </div>

Below example illustrate the example of Spectre Accordion:

Example:

Output:

👁 Spectre Accordions

Reference: https://picturepan2.github.io/spectre/components/accordions.html