Element

Source Code

README

Expandable accordion component. It allows users to reveal or hide content inside collapsible sections.

How to Use the Component

Create the container for the accordion items.

<div class="accordion-container">
  <!-- Accordion Items go here -->
</div>

Each accordion item consists of:

• A hidden checkbox (input[type="checkbox"]): controls expansion;
• A label (label): acts as the clickable trigger;
• A content container (div.content): holds the expandable content.

Creating an Accordion Item

Each item must follow this structure:

<div class="accordion-item">
  <input type="checkbox" id="accordion-item-1" />
  <label for="accordion-item-1">Your Title Here</label>
  <div class="content">
    <!-- Your content goes here... -->
  </div>
</div>

Key points to remember:

• The <input> must have a unique id;
• The <label> must have a matching for attribute that references the id of the checkbox;
• The .content section contains the content that will be shown or hidden when the label is clicked.

Adding Content Inside an Accordion Item

If your content requires a list of items, use <ul> and <li> inside .content:

<div class="accordion-item">
  <input type="checkbox" id="accordion-item-4" />
  <label for="accordion-item-4">
    Get info about linked documents & websites
  </label>
  <div class="content">
    <ul>
      <li>Hover over a linked cell or text;</li>
      <li>A preview will appear with details about the link;</li>
      <li>Click the preview to visit the linked document or website.</li>
    </ul>
  </div>
</div>

If your content is just text (not a list), use <p> inside .content:

<div class="accordion-item">
  <input type="checkbox" id="accordion-item-5" />
  <label for="accordion-item-5">General Information</label>
  <div class="content">
    <p>
      This is general information. It can be a description or an explanation.
    </p>
  </div>
</div>