Spectre Accordions

Last Updated : 13 Jun, 2022

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:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
 
<body>
    <center>
    <h1 class="text-success">GeeksforGeeks</h1>
    <strong>SPECTRE Accordion Class</strong>
    <br><br>
    <div class="accordion">
      <input type="checkbox"
             id="accordion-1"
             hidden>
      <label class="accordion-header"
             for="accordion-1">
        <i class="icon icon-arrow-right mr-1"></i>
        Geeksforgeeks
      </label>
      <div class="accordion-body">
         
<p>
           Image result for Geeksforgeeks description
           We provide a variety of services for you to
           learn, thrive and also have fun! Free Tutorials,
           Millions of Articles, Live, Online and Classroom
           Courses ,Frequent Coding Competitions ,Webinars
           by Industry Experts, Internship opportunities and
           Job Opportunities. Knowledge is power!
        </p>
 
 
      </div>
    </div>
    </center>
</body>
 
</html>