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

Pritesh Modi

LogicRays Technologies

<p>Logicrays AI FAQ Builder revolutionizes how you create and manage FAQs on your WordPress website. Using advanced AI technology, the plugin automatically generates relevant, helpful FAQs based on your content, saving you hours of manual work.</p>
<h4>Key Features</h4>
<ul>
<li><strong>AI-Powered Generation</strong>: Automatically creates FAQs using OpenAI or Google Gemini</li>
<li><strong>Multiple Display Styles</strong>: Choose from accordion, simple list, cards, or tabs</li>
<li><strong>WooCommerce Integration</strong>: Perfect for product pages and e-commerce sites</li>
<li><strong>Shortcode Support</strong>: Use <code>[logicrays_ai_faq_builder]</code> (alias: <code>[logrfaq_builder]</code>) and <code>[logrfaq_group]</code> (alias: <code>[logicrays_ai_faq_group]</code>)</li>
<li><strong>Customizable Design</strong>: Full control over colors, fonts, animations, and layout</li>
<li><strong>Accessibility Compliant</strong>: WCAG 2.1 AA standards with proper ARIA attributes</li>
<li><strong>Responsive Design</strong>: Works perfectly on all devices and screen sizes</li>
</ul>
<h4>Display Options</h4>
<ul>
<li><strong>Accordion Style</strong>: Classic expandable/collapsible FAQ items</li>
<li><strong>Simple List</strong>: Clean, minimal design with all answers visible</li>
<li><strong>Cards Layout</strong>: Modern card-based design for visual appeal</li>
<li><strong>Tabs Interface</strong>: Tabbed navigation for organized content</li>
</ul>
<h4>Use Cases</h4>
<ul>
<li><strong>E-commerce Sites</strong>: Product FAQs, shipping information, return policies</li>
<li><strong>Business Websites</strong>: Company information, services, contact details</li>
<li><strong>Blogs</strong>: Topic-specific FAQs, reader questions, content clarification</li>
<li><strong>Educational Sites</strong>: Course information, student resources, policies</li>
<li><strong>Support Sites</strong>: Help documentation, troubleshooting guides</li>
</ul>
<h4>Easy Integration</h4>
<p>Simply use the shortcode <code>[logicrays_ai_faq_builder]</code> (or <code>[logrfaq_builder]</code>) in any post or page. You can also create FAQ Groups and display them with <code>[logrfaq_group id="123"]</code>.</p>
<h3>External services</h3>
<p>This plugin connects to third-party AI APIs to generate FAQs and fetch available model lists.</p>
<p>OpenAI API: <a href="https://developers.openai.com/api/reference/overview" rel="nofollow ugc">API Reference Overview</a><br />
* <strong>Service purpose</strong>: Generate FAQs and fetch available OpenAI models.<br />
* <strong>Data sent</strong>: API key (Authorization header), content context you submit for FAQ generation (for example post title/description/content snippets), selected model and generation parameters.<br />
* <strong>When sent</strong>: When you test the connection, refresh model list, or generate FAQs.<br />
* <strong>Terms</strong>: <a href="https://openai.com/policies/terms-of-use" rel="nofollow ugc">https://openai.com/policies/terms-of-use</a><br />
* <strong>Privacy</strong>: <a href="https://openai.com/policies/privacy-policy" rel="nofollow ugc">https://openai.com/policies/privacy-policy</a></p>
<p>Google Gemini API <a href="https://gemini.google.com/app" rel="nofollow ugc">https://gemini.google.com/app</a><br />
* <strong>Service purpose</strong>: Generate FAQs and fetch available Gemini models.<br />
* <strong>Data sent</strong>: API key, content context you submit for FAQ generation (for example post title/description/content snippets), selected model and generation parameters.<br />
* <strong>When sent</strong>: When you test the connection, refresh model list, or generate FAQs.<br />
* <strong>Terms</strong>: <a href="https://policies.google.com/terms" rel="nofollow ugc">https://policies.google.com/terms</a><br />
* <strong>Privacy</strong>: <a href="https://policies.google.com/privacy" rel="nofollow ugc">https://policies.google.com/privacy</a></p>
<h3>Privacy & Security</h3>
<ul>
<li>API keys are stored securely in the WordPress database</li>
<li>No FAQ data is sent to third parties except your chosen AI provider</li>
<li>GDPR compliant with proper data handling</li>
<li>Regular security updates and vulnerability patches</li>
<li>No tracking or analytics without explicit consent</li>
</ul>
<h3>Credits</h3>
<p>Developed by <a href="https://logicrays.com/" rel="nofollow ugc">Logicrays</a> – Your trusted WordPress development partner.</p>
<h3>License</h3>
<p>This plugin is licensed under the GPL v2 or later.</p>
<h3>Technical Requirements</h3>
<ul>
<li>WordPress 6.5 or higher</li>
<li>PHP 7.4 or higher</li>
<li>MySQL 5.6 or higher</li>
<li>Modern web browser</li>
<li>HTTPS recommended for API calls</li>
</ul>


Logicrays AI FAQ Builder

Automatically generate intelligent FAQs using AI for WordPress posts, pages, and WooCommerce products with beautiful display options.

Accordion Shortcode vs Logicrays AI FAQ Builder