Accordion with Arrow Indicator

An accordion with arrow indicator built using pure HTML and CSS that includes a rotating arrow icon to signal panel expansion. It improves state visibility and interaction feedback without relying on JavaScript.

Usage

Use this component when expandable sections require clear open and close state cues, such as FAQs, documentation pages, onboarding steps, or content breakdown sections.

Implementation

The arrow animation is handled using CSS transform rotation and state selectors, allowing the indicator to rotate smoothly when the panel expands. Transition timing ensures fluid visual feedback across screen sizes.

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

• Built with pure HTML and CSS
• No JavaScript required
• Includes animated arrow state indicator
• Enhances panel expansion clarity
• Fully responsive across breakpoints
• Suitable for FAQs and documentation layouts
• Easy to customize arrow style and rotation speed

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.