Accordion with Arrow Indicator

This accordion component includes an arrow indicator that rotates on open, improving visual clarity.

HTML

<div class="ss-accordion">
  <details>
    <summary>Accordion</summary>
    <p>Accordion content here.</p>
  </details>
</div>

<div class="ss-accordion">
  <details>
    <summary>Accordion</summary>
    <p>Accordion content here.</p>
  </details>
</div>

CSS

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

.ss-accordion summary::after{
  content:"›";
  position:absolute;
  right:0;
  transition:.3s;
}

details[open] summary::after{
  transform:rotate(90deg);
}

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

.ss-accordion summary::after{
  content:"›";
  position:absolute;
  right:0;
  transition:.3s;
}

details[open] summary::after{
  transform:rotate(90deg);
}

Notes

• Visual open indicator
• Improved UX
• CSS-only rotation
• Clean design

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.