Advanced Accordion Gutenberg Block – Create Beautiful FAQs, Content Accordions & Interactive Tabs vs Lightweight Accordion

Advanced Accordion Gutenberg Block is the #1 WordPress plugin for creating professional FAQ sections, expandable content accordions, and interactive tabs directly in the Gutenberg editor. Built with 100% native Gutenberg components, this lightweight plugin delivers stunning results without slowing down your website. Perfect for bloggers, agencies, and businesses looking to organize content, improve user engagement, and enhance SEO performance—all without writing a single line of code. Why Choose Advanced Accordion Block? Lightning-Fast Performance – Optimized code means zero bloat. Only loads on pages using the block. 100% Gutenberg Native – Built exclusively with Gutenberg components for seamless WordPress integration. Unlimited Flexibility – Nest accordions, mix content types, and customize every detail. Consistent Update & Improvements – Regular updates and improvements to keep the plugin secure, performant, and feature-rich. SEO Optimized – FAQ schema markup and responsive design help you rank higher. Fully Accessible – Complete keyboard navigation (Tab, Shift+Tab, Enter/Space, Arrow keys). No Coding Skills Needed – Drag-and-drop editor makes it easy for anyone. Video Overview Quick Links Get Pro Features – Unlock advanced functionality View Live Demos – See it in action Full Documentation – Complete guides and tutorials Feature Showcase – Explore all capabilities Core Features Free Version Includes: Unlimited Accordions – Create as many FAQs and accordion sections as needed across all pages and posts. Nested Accordion Support – Build multi-level accordions for complex content hierarchies. Perfect for structured documentation and process guides. Global Style Settings – Set universal accordion styling from one place. Apply consistent branding across your entire website with a single click. Responsive Design – Perfect display on all devices—desktop, tablet, and mobile. Touch-friendly and fully responsive. Horizontal Accordion Block – Display accordions side-by-side with titles, subtitles, icons, and any inner blocks. Ideal for product comparisons and feature showcases. Advanced Customization – Customize margins, padding, border radius, colors, backgrounds, and more for each accordion item. Multiple Content Types – Insert text, images, videos, tables, buttons, and any other block inside accordion sections. Pre-Built Patterns – Get started instantly with professionally designed accordion patterns. Save hours of design work. Keyboard Accessibility – Full keyboard navigation support: • Tab – Next accordion • Shift + Tab – Previous accordion • Enter/Space – Expand/collapse • Arrow Keys – Navigate between items Active on Page Load – Automatically expand specific accordion sections when the page loads for better user engagement. SEO-Friendly with FAQ Schema – Automatic FAQ structured data markup improves search rankings and enables Rich Results in Google Search. Linked Accordions – Connect accordion items for synchronized, interconnected content experiences. Custom Color Palette – Choose from unlimited color options to match your brand perfectly. Premium Features Upgrade to Pro and unlock powerful advanced capabilities: Instant Search – Enable a search bar to help users find specific FAQs quickly. It’s useful when you have a long list of FAQs. Question & Answer (Q&A) Style – Display FAQs in a structured question-and-answer format for easy readability and user engagement. Voting Feedback – Add feedback voting buttons to each FAQ item. From the total vote count, you can understand how helpful an accordion is. Anchor Link – Generate unique links for each FAQ item. It’s handy for directing users to specific FAQs from external sources or within the same page. Open All / Close All – A functionality that lets users expand or collapse all accordion items simultaneously. It provides convenience, especially when users want to view or hide all FAQ items at once. Read More Button – Expand the accordion content beyond a certain character limit or line count, displaying a “Read More” button or link to reveal the entire content. Activator Event – Choose the event type to activate the accordion. You can choose from Click and Hover. Steps Layout – Sequentially open accordions, marking previously opened ones as checked, guiding users through a step-by-step process. Checklist Layout – Convert accordions into a checklist format, allowing users to tick off completed items, ensuring thorough task management. Featured Icon – Integrate custom icons/images into your accordion title to represent different types of themes visually. This enhances user experience and helps quickly differentiate content. Subheading Support – Add unique subheadings to each accordion section for better content organization. This improves user navigation, making it easy for visitors to find and engage with specific information. Custom CSS Field – With full custom CSS support, you can tailor your accordion’s colors, fonts, and animations to seamlessly align with your website’s style. Filter Tab by Category – Easily filter and view specific content within your accordion sections. Set custom tags in the parent accordion, and watch the magic happen with dynamic filtering for a more organized and user-friendly experience. Show More Button – Enhance user experience by enabling the “Show More” button in Group Accordion. Control how many items are displayed per click, keeping content organized and accessible. Labelling Option – User can add custom text label beside the Single accordion title, making it easier to highlight key information and categorize content effectively. Autoplay Functionality – Enable automatic section switching in Group Accordion blocks. Accordions will rotate between sections without user clicks, improving engagement and saving time. Feature Image Support – Add a custom image to each Group Accordion block for a more visually appealing and easily recognizable layout. Auto-Numbering with Color Support – Automatically number accordion items with customizable colors, giving your content a cleaner and more organized appearance. Next/Previous Navigation – Enable smooth sequential browsing inside accordion content with built-in Next and Previous navigation controls, helping users move through sections without closing the accordion. See All Features Creating an Accordion FAQ with Advanced Accordion Perfect For Bloggers & Content Creators – Organize long-form content into scannable, reader-friendly sections. E-commerce Sites – Build product FAQs that reduce customer support inquiries and boost conversions. Service Providers – Create comprehensive FAQ sections for agencies, consultants, and SaaS companies. Educational & Training – Build interactive step-by-step guides and course content with nested accordions. Corporate & Enterprise – Professional Q&A sections with advanced filtering and custom styling. Job Boards & Directories – Expandable listings with custom organization and search capabilities. WHAT’S NEXT? If you like Advanced Accordion, then consider checking out our other WordPress Plugins: EazyDocs – Powerful knowledge base plugin to easily create and manage professional documentation, wikis, and helpdesk sections. Antimanual – AI-powered assistant that automates content creation, documentation, and support, transforming static sites into dynamic experiences. Changeloger – Transform plain text changelogs into visually stunning, organized representations with pagination and version links. Forumax – Standalone, feature-rich community forum plugin with voting, private replies, and Elementor integration. Jobus – Comprehensive job board solution transforming your site into a recruitment platform with dashboards and ATS. Spider Elements – Versatile library of 20+ creative widgets to enhance Elementor and build professional websites.

Lightweight Accordion plugin for WordPress allows you to add collapse elements to posts using a Gutenberg block or a shortcode (via classic editor). By using the details HTML tag and a few lines of CSS this allows for a javascript-free accordion for minimum page load. Extremely Lightweight (<1kb): Without using Javascript the plugin uses the native details HTML tag and a few lines of code for almost no impact on front-end. Customizable: Options include customizing the HTML tag used for the accordion title, open by default, borders, colors, and accordion grouping (auto-close others when one opens). Shortcode Usage examples Here are a few examples of using the accordion plugin with shortcodes. [lightweight-accordion title="My Accordion"]My Content[/lightweight-accordion] Additionally you can display the accordion open on load with the accordion_open option. [lightweight-accordion title="My Accordion" accordion_open=true]My Content[/lightweight-accordion] You can also change the html tag wrapping the title of the accordion using the title_tag option. [lightweight-accordion title="My Accordion" title_tag="h3"]My Content[/lightweight-accordion] If you want to include FAQ schema you can add the schema option and set it to faq. [lightweight-accordion title="What is your return policy?" schema="faq"]You have 1 week to return your items[/lightweight-accordion] If you’d like put a border around the content of the accordion you can use the “bordered” attribute. [lightweight-accordion title="Bordered Content" bordered=true]My Content[/lightweight-accordion] If you want accordions to auto-close when another opens (exclusive accordion), use the “group” attribute with the same value on each accordion. [lightweight-accordion title="Question 1" group="faq"]Answer 1[/lightweight-accordion] [lightweight-accordion title="Question 2" group="faq"]Answer 2[/lightweight-accordion] [lightweight-accordion title="Question 3" group="faq"]Answer 3[/lightweight-accordion] If you’d like to swap the default triangle marker for a chevron or plus/minus icon (optionally on the right side of the title) use the “icon” and “icon_position” attributes. [lightweight-accordion title="My Accordion" icon="chevron" icon_position="right"]My Content[/lightweight-accordion] Shortcode Options Here is the full listing of shortcode options. Additionally all of these options are accessible when using the Gutenberg block. title (Required Default: null) The title of your accordion will be displayed at the top for users to click. A good example would be to include a user’s question so they could click it for more details. content (Required Default: null) Content that will go into your accordion element. title_tag (Default: “span”) This sets the html tag that wraps the title in the accordion summary. Useful if you want to make it a heading tag for SEO purposes. accordion_open (Default: false) Set this to true if you want your accordion to be open by default. bordered (Default: false) Set this to true if you want a border around the accordion content. title_text_color (Default: false) Set this to a hex value or CSS color to change the color of the accordion title text. title_background_color (Default: false) Set this to a hex value or CSS color to change the color of the accordion title text. schema (Default: false) Set this to faq if you’d like FAQ schema to be included. class (Default: false) Used to add a custom class to the parent container of the accordion. anchor (Default: null) Adds the value as an ID to the accordion div as an anchor. autop (Default: true) By default the shortcode will wrap text in a ‘p’ tag. Set this to false if you’d like this disabled for the specific accordion. group (Default: false) Set this to a group name to make accordions with the same group auto-close when another opens. Uses the native HTML details name attribute for zero JavaScript overhead. icon (Default: false) Set this to “chevron”, “plus”, or “none” to replace the default triangle marker. The chevron rotates and the plus becomes a minus when the accordion opens. icon_position (Default: false) Set this to “right” to display the chevron or plus icon on the right side of the accordion title. Additional Details If you’d like to remove the “lightweight-accordion.css” from being enqueued on your site use the filter below. It’s recommend you style the accordion yourself if you use this filter. add_filter('lightweight_accordion_include_frontend_stylesheet', '__return_false' ); If you’d like to remove the “lightweight-accordion/editor-styles.css” from being enqueued in the admin area of your site you can use the filter below. add_filter('lightweight_accordion_include_admin_stylesheet', '__return_false' ); If you’d like to remove processing of shortcodes in accordion content you can use this filter. add_filter('lightweight_accordion_process_shortcodes', '__return_false' ); If you’d like to use inline Microdata for FAQ schema you can use this filter. (Not recommended) add_filter('lightweight_accordion_output_microdata', '__return_true' ); If you’d like to force “lightweight-accordion.css” to load on all of your site you can use this filter. By default the plugin will detect if the block or shortcode is used and enqueue the CSS. add_filter('lightweight_accordion_always_include_frontend_stylesheet', '__return_true' ); When a page contains an accordion a tiny inline script is added to the footer that automatically opens accordions targeted by a URL hash (for example a link to an accordion’s anchor). If you’d like to disable this you can use the filter below. add_filter('lightweight_accordion_anchor_script', '__return_false' );