Basic Accordion Component

This basic accordion component is built using pure HTML and CSS. It is ideal for FAQs, help sections, and collapsible content.

HTML

<div class="ss-accordion">
  <details>
    <summary>What is Stylosheet?</summary>
    <p>Stylosheet is a UI component library.</p>
  </details>
</div>

<div class="ss-accordion">
  <details>
    <summary>What is Stylosheet?</summary>
    <p>Stylosheet is a UI component library.</p>
  </details>
</div>

CSS

.ss-accordion details{
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:14px;
}

.ss-accordion summary{
  cursor:pointer;
  font-weight:600;
}

.ss-accordion details{
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:14px;
}

.ss-accordion summary{
  cursor:pointer;
  font-weight:600;
}

Notes

• Uses native HTML <details>
• Accessible by default
• Lightweight solution
• No JavaScript required

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.