Enej Bajgorić

ctlt-dev

ubcdev

<p>To make the accordions appear the way you want you need to add your own styling to them<br />
Lets you add accordion to your post and pages.</p>
<p>By using the following shortcodes</p>
<pre><code>[accordions]
[accordion title="title1"] tab content [/accordion]
[accordion title="title2"] another content tab [/accordion]
[/accordions]
</code></pre>
<p>will generate the following html.</p>
<pre><code><div id="random-accordion-id-872" class="accordions-shortcode">
            <h3 id="title1-0" ><a href="#title1-0">title1</a></h3>

            <div class="accordian-shortcode-content" >


 Some Text<br />
            </div>

            <h3 id="title2-1" ><a href="#title2-1">title2</a></h3>

            <div class="accordian-shortcode-content " >


 Some Text<br />
            </div>

</div>
</code></pre>
<p>Additional attributes that you could pass into the shortcode<br />
    [accordions autoHeight=’true’  disabled=’false’ active=0  clearStyle=false collapsible=false fillSpace=false ]<br />
    [accordion title=’title1′ class=’new-class’]<br />
     Some Text<br />
    [/accordion]<br />
    [accordion title=’title2′ class=’new-class’]<br />
     Some Text<br />
    [/accordion]<br />
    [/accordions]</p>
<h3>Sample CSS</h3>
<p>Here is some sample css to get you started.<br />
Another place to look for it would be the http://jqueryui.com/themeroller/, The shortcode used the jQuery UI to generate the accordion.</p>
<pre><code>.ui-accordion-header{
    margin:5px 0 0;
}
.ui-accordion-header a{
    padding:5px 12px;
    background: #CCC; 
    color:#FFF;
    display:block;
}
.ui-accordion-header.ui-state-active a,
.ui-accordion-header a:hover{
    background-color: #DDD;
}
.ui-accordion-content{
    padding-top:10px;
}
</code></pre>


Accordion Shortcode

Lets you easily add accordions into your posts and pages using the accordion shortcode

Creative Werk Designs

Arpit G Shah

<p>WPFAQBlock is a WordPress FAQ builder and accordion plugin for creating, managing, and displaying professional FAQ sections across your website.</p>
<p>Use WPFAQBlock to build support FAQs, product FAQs, service FAQs, help center questions, documentation FAQs, and clear question-and-answer content for posts, pages, widgets, and custom post types. The plugin includes a visual FAQ builder, Gutenberg block support, shortcode output, FAQ category filtering, optional FAQPage JSON-LD schema, custom accordion icons, import/export tools, and AI-assisted FAQ generation with OpenAI or Google Gemini.</p>
<p>Frontend FAQ content is rendered as HTML, and optional FAQPage JSON-LD structured data can be enabled for eligible FAQ pages. This helps search engines understand your FAQ content without forcing schema output on every site.</p>
<p>WPFAQBlock is designed for site owners, agencies, ecommerce stores, service businesses, content teams, and developers who need a flexible FAQ plugin that stays lightweight, accessible, and easy to manage.</p>
<h4>Key Features</h4>
<ul>
<li><strong>Visual FAQ Builder</strong> – Create, edit, organize, and manage FAQs from a clean admin interface.</li>
<li><strong>Accordion FAQ Layout</strong> – Display FAQs in a user-friendly collapsible accordion format.</li>
<li><strong>Gutenberg FAQ Block</strong> – Add FAQ sections directly from the WordPress block editor.</li>
<li><strong>FAQ Shortcode</strong> – Display FAQs anywhere with the <code>[wpfaqblock]</code> shortcode.</li>
<li><strong>Per-Instance FAQ Selection</strong> – Choose all FAQs, selected FAQs, or FAQs from selected categories for each display.</li>
<li><strong>FAQ Categories</strong> – Group FAQs by category and show only the content needed on each page.</li>
<li><strong>Optional FAQ Schema</strong> – Enable FAQPage JSON-LD structured data only when you want schema output.</li>
<li><strong>Displayed-Only Schema Output</strong> – Schema is generated only from FAQs actually rendered on the current page.</li>
<li><strong>Custom Accordion Icons</strong> – Upload separate open and closed accordion icons from the WordPress Media Library.</li>
<li><strong>Open First Accordion Option</strong> – Choose whether the first FAQ item should be open by default.</li>
<li><strong>Import and Export FAQs</strong> – Export all FAQs, selected FAQs, single categories, or multiple categories as JSON.</li>
<li><strong>AI FAQ Generation</strong> – Generate FAQ suggestions from builder prompts or editor content using OpenAI or Gemini.</li>
<li><strong>Editor Content FAQ Generator</strong> – Generate FAQs while editing a post, page, product, or supported custom post type.</li>
<li><strong>Custom Post Type Storage</strong> – FAQs are stored as WordPress content for easier management, backups, and migration.</li>
</ul>
<h4>Common Use Cases</h4>
<ul>
<li>Product FAQ sections for WooCommerce or ecommerce pages.</li>
<li>Service FAQs for local business, agency, and landing pages.</li>
<li>Help center or support FAQ content.</li>
<li>Documentation pages with categorized questions and answers.</li>
<li>FAQ schema structured data for eligible FAQ content.</li>
<li>Reusable FAQ blocks across posts, pages, widgets, and templates.</li>
<li>AI-assisted FAQ creation from existing page or post content.</li>
</ul>
<h3>Shortcode Usage</h3>
<p>Display all published FAQs:</p>
<pre><code>[wpfaqblock]
</code></pre>
<p>Display FAQs from one category:</p>
<pre><code>[wpfaqblock category="returns"]
</code></pre>
<p>Limit the number of FAQs:</p>
<pre><code>[wpfaqblock category="returns" limit="5"]
</code></pre>
<p>Hide the category title:</p>
<pre><code>[wpfaqblock category="returns" category_title="0"]
</code></pre>
<p>Change FAQ order:</p>
<pre><code>[wpfaqblock category="general" order="DESC"]
</code></pre>
<p>Open the first accordion item by default:</p>
<pre><code>[wpfaqblock category="general" open_first="1"]
</code></pre>
<p>Display specific FAQs only:</p>
<pre><code>[wpfaqblock ids="12,34,56"]
</code></pre>
<p>Use custom accordion icons:</p>
<pre><code>[wpfaqblock ids="12,34" closed_icon="https://example.com/closed.png" open_icon="https://example.com/open.png"]
</code></pre>
<h4>Shortcode Attributes</h4>
<ul>
<li><code>category</code> – Filter FAQs by <code>faq_group</code> term slug. Leave empty to show all FAQs.</li>
<li><code>ids</code> – Comma-separated FAQ post IDs for showing specific FAQs only.</li>
<li><code>limit</code> – Maximum number of FAQs to display. Use <code>-1</code> to show all matching FAQs.</li>
<li><code>order</code> – Sort order. Accepts <code>ASC</code> or <code>DESC</code>.</li>
<li><code>category_title</code> – Set to <code>0</code> to hide the category heading above grouped FAQ output.</li>
<li><code>open_first</code> – Set to <code>1</code> to open the first accordion item by default.</li>
<li><code>closed_icon</code> – Image URL for the closed accordion state.</li>
<li><code>open_icon</code> – Image URL for the open accordion state.</li>
</ul>


WPFAQBlock – FAQ & Accordion Plugin For Gutenberg

FAQ builder and accordion plugin with FAQ Schema, Gutenberg block, shortcode, AI FAQ generation, category filters, import/export, and custom icons.

Accordion Shortcode vs WPFAQBlock – FAQ & Accordion Plugin For Gutenberg