philbuchanan

<p>Accordion Blocks is a simple plugin that adds a Gutenberg block for adding accordion drop-downs to your pages.</p>
<p>The accordions should blend seamlessly with your theme. However, you may want to add custom styles to your theme.</p>
<h4>Features</h4>
<ul>
<li>Adds a Gutenberg block for adding accordions to your site.</li>
<li>Supports multiple accordions with individual settings for each accordion item.</li>
<li>Fully responsive.</li>
<li>Support for item IDs and direct links.</li>
<li>Supports nesting accordions.</li>
<li>Accessible (for users requiring tabbed keyboard navigation control).</li>
</ul>
<h4>Optional Features</h4>
<ul>
<li>Open individual accordion items by default.</li>
<li>Disable auto closing of accordion items.</li>
<li>Manually close items by clicking the title again.</li>
<li>Scroll page to title when it’s clicked open (including setting a scroll offset position).</li>
<li>Set the HTML heading tag for the title element (h1–h6, button).</li>
<li>Set defaults to be applied to all new accordion items or reset a specific accordion item to the defaults.</li>
<li>Supports adding custom block styles using <code>wp.blocks.registerBlockStyle</code>.</li>
</ul>
<h4>Output</h4>
<p>The plugin will ultimately output following HTML (simplified for this example):</p>
<pre><code><div class="wp-block-pb-accordion-item c-accordion__item js-accordion-item" data-initially-open="false" data-click-to-close="true" data-auto-close="true" data-scroll="false" data-scroll-offset="0">
    <h2 id="at-76840" class="c-accordion__title js-accordion-controller" tabindex="0" role="button" aria-controls="ac-76840" aria-expanded="false">
        Title with H2 tag
    </h2>
    <div id="ac-76840" class="c-accordion__content" style="display:none" aria-hidden="true">
        <p>Content</p>
    </div>
</div>
</code></pre>
<h4>Custom CSS</h4>
<p>You can use the following CSS classes to customize the look of the accordion.</p>
<pre><code>.c-accordion__item {} /* The accordion item container */
.c-accordion__item.is-open {} /* is-open is added to open accordion items */
.c-accordion__item.is-read {} /* is-read is added to accordion items that have been opened at least once */
.c-accordion__title {} /* An accordion item title */
.c-accordion__title--button {} /* An accordion item title that is using a `<button>` tag */
.c-accordion__title:hover {} /* To modify the style when hovering over an accordion item title */
.c-accordion__title:focus {} /* To modify the style when an accordion item title currently has broswer focus */
.c-accordion__content {} /* An accordion item content container */
</code></pre>


Accordion Blocks

Gutenberg block for creating responsive accordion drop-downs.

Themepoints

<p>Create beautiful, responsive accordions and FAQ sections with multiple styles, skins, and advanced customization—perfect for organizing content and improving UX.</p>
<ul>
<li><a href="https://themepoints.com/wp-accordions/" rel="nofollow ugc">Live Preview</a></li>
<li><a href="https://themepoints.com/wp-accordions/free-version-doc/" rel="nofollow ugc">Documentation</a></li>
<li><a href="https://themepoints.com/contact/" rel="nofollow ugc">Need Support</a></li>
</ul>
<p><strong>Plugin Features </strong></p>
<ul>
<li>Fully responsive.</li>
<li>All Browser support.</li>
<li>Unlimited Accordions anywhere in the theme.</li>
<li>Use via short-code.</li>
<li>5 Different Themes.</li>
<li>Drag & Drop Accordion sorting.</li>
<li>WP Editor for accordion content.</li>
<li>Custom Title background color.</li>
<li>Custom Title Font color.</li>
<li>Custom Title Font Size.</li>
<li>Custom Content Background Color.</li>
<li>Custom Content Font Color.</li>
<li>Custom Content Font Size.</li>
<li>Content Padding Option.</li>
<li>Add and remove accordion item from backend.</li>
<li>Highly customized for User Experience.</li>
<li>And Many More…</li>
</ul>
<p><strong>Pro Version Features</strong></p>
<ul>
<li>All Features of the free version.</li>
<li>Fully responsive.</li>
<li>8+ different Themes.</li>
<li>Widget Ready.</li>
<li>Unlimited Domain.</li>
<li>Support wysiwyg text editor.</li>
<li>Create accordions by group.</li>
<li>Cross-browser compatibility.</li>
<li>Drag & Drop accordion items sorting.</li>
<li>Add and remove accordion item from backend.</li>
<li>Use via short-codes.</li>
<li>Accordion header title font size.</li>
<li>Accordion header title font color.</li>
<li>Accordion header title text position.</li>
<li>Accordion header title background color.</li>
<li>Show/Hide Accordions expand/collapse icons options.</li>
<li>Accordion header closeAble true or false Options.</li>
<li>Expand/collapse Slide speed of Animation Options.</li>
<li>Accordion content font size.</li>
<li>Accordion content font color.</li>
<li>Accordion content background.</li>
<li>Custom Accordion Padding Options.</li>
<li>Accordion area background image Options.</li>
<li>Accordions Area Padding Options.</li>
<li>Support Any videos (Ex: youtube, vimeo )</li>
<li>Valid HTML5 & CSS3 layout.</li>
<li>Highly customized for User Experience.</li>
<li>Clean Design & Code.</li>
<li>Unlimited accordion anywhere in the themes or template.</li>
<li>Work in all browsers and mobile devices.</li>
<li>Life Time Self hosted auto updated enable.</li>
<li>24/7 dedicated support forum.</li>
<li>Well Documentation.</li>
<li>And much more!</li>
</ul>
<p><strong>Activation</strong></p>
<p>Once the accordion-wp folder has been uploaded, you can activate the plugin. Go to your WordPress admin panel and select the ‘Plugins’ menu option. You should see a new plugin listed, Accordion-Wp. Click Activate to activate the plugin.</p>
<p><strong>Using the Plugin</strong></p>
<p>Once the plugin has been activated, a new menu called Accordion will appear in menu section. There are Three menu options: ‘Accordion’, ‘Add New Accordion’ & ‘Help & Support’.</p>
<p><strong>Creating First Accordion</strong></p>
<p>Click the Accordion submenu entry entitled ‘Add New Accordion’. This will take you to the accordion creation and editing page, Then click Add New Item to add accordion.</p>
<p>Begin by entering a title & description for your accordion. Description Content can be entered using the Visual or HTML content editors. Any valid HTML content (e.g. images, video etc.) can be displayed inside accordion.</p>
<p>To add a new accordion, Just click the ‘Add New Item’ button & fill all the data .</p>
<p>To remove a Accordion, click the ‘Remove’ button located top right side of the accordion title or visual editor.</p>
<p><strong>Inserting Accordion into a Post/page or Widget</strong></p>
<p>After Publish your accordion, you’ll see a notification that the accordion has been Published, then go to ‘Accordion Configure ’ change your own settings & Shortcode tab copy the shortcode & paste into any where into your post/page or text widgets. save your post/page or widgets and browse to see your accordion.</p>
<p><strong> Note :</strong></p>
<p>Some features is not available in free version . <a href="https://themepoints.com/wp-accordions/" rel="nofollow ugc">Upgrade Premium!»</a>  to unlock all amazing features.</p>


Accordions – Responsive Accordion & FAQ Plugin for WordPress

Responsive HTML & CSS3 accordion for WordPress.

Accordion Blocks vs Accordions – Responsive Accordion & FAQ Plugin for WordPress