Accordions - Components - Spectre.css CSS Framework
Author: Yan Zhu
Description: Accordions are used to toggle sections of content. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Accordions#

Accordions are used to toggle sections of content.

Elements

- Element 1
- Element 2

Layout

- Layout 1
- Layout 2

Components

- Component 1
- Component 2

Elements

- Element 1
- Element 2

Layout

- Layout 1
- Layout 2

Components

- Component 1
- Component 2

    <!-- standard Accordions example -->
    <div class="accordion">
      <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
      <label class="accordion-header" for="accordion-1">
        <i class="icon icon-arrow-right mr-1"></i>
        Title
      </label>
      <div class="accordion-body">
        <!-- Accordions content -->
      </div>
    </div>

    <!-- mutually exclusive Accordions example (with same input names) -->
    <div class="accordion">
      <input type="radio" id="accordion-1" name="accordion-radio" hidden>
      <label class="accordion-header" for="accordion-1">
        Title
      </label>
      <div class="accordion-body">
        <!-- Accordions content -->
      </div>
    </div>

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.

    <!-- details and summary Accordions example -->
    <details class="accordion" open>
      <summary class="accordion-header">
        <i class="icon icon-arrow-right mr-1"></i>
        Title
      </summary>
      <div class="accordion-body">
        <!-- Accordions content -->
      </div>
    </details>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.