UINEXA SNIPPET

Smooth FAQ Accordion

An accessible smooth faq accordion with smooth state changes and reusable content panels.

CSS HTML easy FREE FEATURED

Snippet Details

Difficulty: easy

Type: Frontend Effect

Status: Copy & Paste Ready

Live Preview

Test the effect before copying.

Source Code

Copy the code into your project.

<div class="ux-smooth-faq-accordion"><button class="ux-smooth-faq-accordion__head" type="button" aria-expanded="true"><span>Smooth FAQ Accordion</span><i aria-hidden="true">+</i></button><div class="ux-smooth-faq-accordion__panel"><p>Place the expandable answer or supporting content inside this panel.</p></div></div>

Installation

How to use this snippet

1. Add an HTML widget in Elementor.

2. Paste the HTML code into the widget.

3. Add the CSS code to Elementor Custom CSS or your website stylesheet.

4. Add the JavaScript through Elementor Custom Code and set the location to Body End.

5. Replace the example labels and panel content with your own information.

6. Replace example text, links and labels with your own content.

7. Test the accordion or tab component on desktop, tablet and mobile.

Elementor Note

Elementor usage

The snippet supports multiple instances on the same page. The JavaScript preserves expanded and selected ARIA states.

Browser Support

Works in modern browsers.

Chrome ✓

Firefox ✓

Safari ✓

Edge ✓