Enej Bajgorić

ctlt-dev

oltdev

<p>To add tabs to you post or pages just add this shortcode:</p>
<pre><code>[tabs]
[tab title="title1"] tab content 
tab content 
[/tab]
[tab title="title2"] 
another content tab 
[/tab]
[/tabs]
</code></pre>
<p>Here are the some attributes that the shortcode also excepts<br />
// default attributes<br />
    [tabs collapsible=true selected=’0′ event=’click’ position=’top’ ]<br />
    [tab title=”title1″]<br />
    tab content<br />
    [/tab]<br />
    [tab title=”title2″]<br />
    another content tab<br />
    [/tab]<br />
    [/tabs]</p>
<ul>
<li>collapsible = true or false – weather the tabs should be allowed to be collapsed – this doesn’t work with twitter bootstrap </li>
<li>selected = integer for example – what tab should be selected. 0 means the first tab. 1 means the second tab etc. </li>
<li>event = ‘click’ or ‘mouseover’ – does do you user need to click on the tab or just mouse over to get to the content. Tip: Don’t use mouseover if you are concerned with mobile. </li>
<li>position = ‘top’ , ‘bottom’ , ‘left’, ‘right’ on what side do you want the tabs to appear. See screenshots for an example. </li>
<li>vertical_tabs = true or false – depreciated is the same as position = left</li>
</ul>
<h3>Sample CSS</h3>
<p>Want to style the tabs a different way.</p>
<p>Here is some sample css to get you started.<br />
Another place to look for it would be the http://jqueryui.com/themeroller/,<br />
The shortcode used the jQuery UI to generate the tabs unless you are using the twitter bootstrap framework.<br />
See the FAQ on how to deal with that case.</p>
<pre><code>/* =tabs
-------------------------------------------------------------- */
.tabs-shortcode.ui-tabs {
    padding:.2em;
    zoom:1;
    clear:both;
    background:#FFF;
    padding:0;
    margin:0;
}

.tabs-shortcode.ui-tabs-nav {
    list-style:none!important;
    padding:.2em 0 0!important;
    margin: 0!important;
}
.tabs-shortcode .ui-tabs-nav:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .tabs-shortcode  .ui-tabs-nav          { zoom: 1; } /* IE6 */
*:first-child+html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE7 */

.tabs-shortcode .ui-tabs-nav li {
    position:relative;
    float:left;
    border:1px solid #CCC;
    background:#EEE;
    list-style:none!important;
    z-index: 100;
    padding:0;
}

.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    background:#FFF;
    color:#111;
}

.tabs-shortcode .ui-tabs-nav li:before {
    content:"";
}

.tabs-shortcode .ui-tabs-nav li a {
    float:left;
    text-decoration:none;
    padding:2px 1em;
    color:#333;
    border:none!important;
}

.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-processing a {
    cursor: default;
}

.tabs-shortcode .ui-tabs-nav li a,
.tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
    cursor:pointer;
}

.tabs-shortcode .ui-tabs-panel {
    display:block;
    border-width:0;
    background:none;
}

.tabs-shortcode .ui-tabs-hide {
    display:none!important;
}

.tabs-shortcode.ui-tabs-panel {
    clear:both;
}
/* Position  Top and Bottom  */
.tabs-shortcode-top .ui-tabs-nav,
.tabs-shortcode-bottom .ui-tabs-nav{
    margin-left:0!important;
}
.tabs-shortcode-top .ui-tabs-nav li,
.tabs-shortcode-bottom .ui-tabs-nav li{
    position:relative;
    float:left;
    position:relative;
    float:left;
}

/* Position Top */
.tabs-shortcode-top .ui-tabs-nav{
    border-bottom: 1px solid #CCC;
}
.tabs-shortcode-top .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-top .ui-tabs-nav li.ui-tabs-selected {
    padding-bottom:1px!important;
    border-bottom:0;
    margin:1px .3em -1px 0!important;
}
.tabs-shortcode-top .ui-tabs-nav li {
    border-bottom-width:0!important;
    margin:1px .3em 0 0!important;
}

/* Position Bottom */
.tabs-shortcode-bottom .ui-tabs-nav{
    border-top: 1px solid #CCC;
}
.tabs-shortcode-bottom .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-bottom .ui-tabs-nav li.ui-tabs-selected {
    padding-top:1px!important;
    border-top:0;
    margin:-1px .3em 1px 0!important;
}

.tabs-shortcode-bottom .ui-tabs-nav li {
    border-top-width:0!important;
    margin:0 .3em 1px 0!important;  
}


/* Position  Left and Right  */
.tabs-shortcode-left .ui-tabs-nav,
.tabs-shortcode-right .ui-tabs-nav{
    width: 150px;
    margin: 0!important;
}

.tabs-shortcode-left .ui-tabs-nav li,
.tabs-shortcode-left,
.tabs-shortcode-right .ui-tabs-nav li,
.tabs-shortcode-right{
    position: relative;
    overflow: hidden;
}
.tabs-shortcode-left .ui-tabs-nav li,
.tabs-shortcode-right .ui-tabs-nav li{
    margin:0 0 0.3em 0;
    width: 100%;
}
.tabs-shortcode-left .ui-tabs-nav li a,
.tabs-shortcode-right .ui-tabs-nav li a{
    width: 100%;
}
.tabs-shortcode-left .ui-tabs-panel,
.tabs-shortcode-right .ui-tabs-panel{
    margin-left: 165px;
}

/* Position Left */
.tabs-shortcode-left .ui-tabs-nav{
    border-right: 1px solid #CCC;
    padding: 0 1px 10px 0!important;
}
.tabs-shortcode-left .ui-tabs-nav,
.tabs-shortcode-left .ui-tabs-nav li{
    float: left;
}
.tabs-shortcode-left .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-left .ui-tabs-nav li.ui-tabs-selected {
    padding-right:1px;
    border-right:0;
    margin:0 1px 0.3em 0;
}

/* Position Right */
.tabs-shortcode-right .ui-tabs-nav{
    border-left: 1px solid #CCC;
    padding: 0 0 10px 1px!important;
}
.tabs-shortcode-right .ui-tabs-nav,
.tabs-shortcode-right .ui-tabs-nav li{
    float: right;
}
.tabs-shortcode-right .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-right .ui-tabs-nav li.ui-tabs-selected {
    padding-left:1px;
    border-left:0;
    margin:0 0 0.3em 1px;
}
</code></pre>


Tabs Shortcode

Lets you add tabs to your post and pages using a shortcode.

WP Forhad

nazmulfeni4

Pluginic

<p>See the video to Get Started: Installation, Activation, Adding FAQs, and Using Shortcodes</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/lt47dkfWbCI?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p><a href="https://demo.pluginic.com/faq-schema-ultimate/" rel="nofollow ugc"><strong>Live Demo</strong></a> | <a href="https://pluginic.com/plugins/faq-schema-ultimate/" rel="nofollow ugc"><strong>Premium Version (30% OFF)</strong></a> | <a href="https://pluginic.com/docs/faq-schema-ultimate-overview/" rel="nofollow ugc"><strong>Documentation</strong></a>  | <a href="https://demo.pluginic.com/faq-schema-ultimate/accordion-demo/" rel="nofollow ugc"><strong>Accordion FAQ Example</strong></a>  | <a href="https://demo.pluginic.com/faq-schema-ultimate/tabs-demo/" rel="nofollow ugc"><strong>Tabbed FAQ Example</strong></a>  | <a href="https://demo.pluginic.com/faq-schema-ultimate/slider-demo/" rel="nofollow ugc"><strong>Slider FAQ Example</strong></a> | <a href="https://pluginic.com/support/" rel="nofollow ugc"><strong>Support Ticket</strong></a></p>
<p>Looking for a comprehensive FAQ solution for your WordPress site?</p>
<p>This responsive and user-friendly plugin provides accordion-style, tabbed, and slider formats to display your FAQs in a stylish and organized manner.</p>
<p>You can add FAQ Schema markup to your WordPress site easily with this plugin. This FAQ rich snippets plugin helps you create structured FAQ data compatible with Yoast and Rank Math. The plugin passes Google’s FAQ schema validation.</p>
<p>It’s compatible with Elementor and Gutenberg Block Editor, making it easy to integrate into your website. Download this FAQ plugin for WordPress now and give your visitors an exceptional FAQ experience.</p>
<p>Say goodbye to confusion and hello to simplicity with this feature-packed plugin.</p>
<h3>KEY FEATURES</h3>
<ul>
<li>Pre-Made FAQ Templates</li>
<li>FAQ Schema Markup Support</li>
<li>Fully Responsive Accordion FAQ</li>
<li>Fully Responsive Tabbed FAQ</li>
<li>FAQ Slider with Full Responsiveness</li>
<li>Fully Responsive FAQ Block</li>
<li>Elementor & Gutenberg Support</li>
<li>Compatible with Rank Math and Yoast SEO</li>
<li>FAQ Theme Widget</li>
<li>Drag and Drop Feature</li>
<li>Integrated Toggle and Collapse Effects</li>
<li>Perfect for Beginners</li>
<li>FAQ Accordion System + Design</li>
<li>Expand & Collapse Icon Color</li>
<li>Accordion Title Background Color</li>
<li>Accordion Description Text and Background Color</li>
<li>Unlimited Color and Styling Options</li>
<li>Shortcode Support</li>
<li>Custom CSS Field to Override Styles</li>
<li>WooCommerce Product FAQ Support</li>
<li>Multiple FAQ Groups</li>
<li>Search Functionality</li>
<li>Print Functionality</li>
<li>Email Functionality</li>
<li>Category and Tag Support</li>
<li>Custom Post Type Support</li>
<li>Translation Ready</li>
<li>RTL Support</li>
<li>Cross-Browser Compatible</li>
<li>Lightweight and Fast Loading</li>
</ul>
<h3>WHAT IS FAQ SCHEMA?</h3>
<p>FAQ Schema is structured data markup that helps search engines understand your FAQ content. When properly implemented, it can result in rich snippets appearing in Google search results, displaying your questions and answers directly in the search listings. This can significantly improve your click-through rates and visibility in search results.</p>
<h3>DISPLAY FORMATS</h3>
<h3>Accordion Style</h3>
<p>Display your FAQs in a classic accordion format where users can click to expand and collapse questions. This format is perfect for saving space while providing easy access to information.</p>
<h3>Tabbed Layout</h3>
<p>Organize your FAQs into tabs for better categorization. Users can switch between different FAQ categories with a single click.</p>
<h3>Slider Format</h3>
<p>Present your FAQs in a modern slider format, perfect for showcasing important questions on your homepage or landing pages.</p>
<h3>GUTENBERG BLOCK EDITOR SUPPORT</h3>
<p>The plugin includes a dedicated Gutenberg block for adding FAQs directly in the Block Editor. Features include:</p>
<ul>
<li>Live preview while editing</li>
<li>Full customization options</li>
<li>Drag and drop reordering</li>
<li>Schema markup integration</li>
<li>Multiple display styles</li>
</ul>
<h3>ELEMENTOR INTEGRATION</h3>
<p>For Elementor users, the plugin provides custom widgets:</p>
<ul>
<li>FAQ Accordion Widget</li>
<li>FAQ Tabs Widget</li>
<li>FAQ Slider Widget</li>
<li>Full styling controls</li>
<li>Responsive options</li>
<li>Animation effects</li>
</ul>
<h3>WOOCOMMERCE SUPPORT</h3>
<p>Add product-specific FAQs to your WooCommerce product pages. Help customers make informed purchase decisions by answering common questions directly on product pages.</p>
<h3>SEO BENEFITS</h3>
<h3>Rich Snippets in Google</h3>
<p>Properly implemented FAQ Schema can result in your FAQs appearing as rich snippets in Google search results, increasing visibility and click-through rates.</p>
<h3>Compatible with SEO Plugins</h3>
<p>Works seamlessly with:<br />
– Yoast SEO<br />
– Rank Math<br />
– All in One SEO<br />
– The SEO Framework</p>
<h3>Structured Data Validation</h3>
<p>The plugin’s FAQ Schema markup passes Google’s Rich Results Test and Schema Markup Validator.</p>
<h3>CUSTOMIZATION OPTIONS</h3>
<h3>Styling Controls</h3>
<ul>
<li>Custom colors for all elements</li>
<li>Typography settings</li>
<li>Border and spacing options</li>
<li>Icon customization</li>
<li>Background options</li>
<li>Hover effects</li>
</ul>
<h3>Layout Options</h3>
<ul>
<li>Single column or multi-column layouts</li>
<li>Grid or list display</li>
<li>Custom widths</li>
<li>Spacing controls</li>
</ul>
<h3>Behavior Settings</h3>
<ul>
<li>Expand/collapse speed</li>
<li>Single or multiple open FAQs</li>
<li>Auto-close options</li>
<li>Smooth scrolling</li>
</ul>
<h3>SHORTCODE USAGE</h3>
<p>Display FAQs anywhere on your site using simple shortcodes:</p>
<pre><code>[faq_schema_ultimate] - Display all FAQs
[faq_schema_ultimate id="123"] - Display specific FAQ group
[faq_schema_ultimate category="product"] - Display FAQs by category<h3>PRO VERSION FEATURES</h3>
</code></pre>
<p>Upgrade to Pro for advanced features:</p>
<ul>
<li>10+ Premium Templates</li>
<li>Advanced Styling Options</li>
<li>Priority Support</li>
<li>WooCommerce Deep Integration</li>
<li>Advanced Search with Ajax</li>
<li>FAQ Import/Export</li>
<li>Custom Fields</li>
<li>Video FAQ Support</li>
<li>FAQ Analytics</li>
<li>And much more!</li>
</ul>
<p><a href="https://pluginic.com/plugins/faq-schema-ultimate/" rel="nofollow ugc">Get Pro Version (30% OFF)</a></p>
<h3>USE CASES</h3>
<h3>E-Commerce Stores</h3>
<p>Answer common product questions, shipping queries, and return policies.</p>
<h3>Service Businesses</h3>
<p>Explain your services, pricing, and booking procedures.</p>
<h3>SaaS Companies</h3>
<p>Provide technical support and feature explanations.</p>
<h3>Educational Sites</h3>
<p>Create course FAQs and enrollment information.</p>
<h3>Healthcare Websites</h3>
<p>Answer patient questions and provide medical information.</p>
<h3>Real Estate Agencies</h3>
<p>Explain property features and buying/renting processes.</p>
<h3>MULTILINGUAL SUPPORT</h3>
<p>The plugin is translation-ready and compatible with:</p>
<ul>
<li>WPML</li>
<li>Polylang</li>
<li>qTranslate-X</li>
<li>Loco Translate</li>
<li>TranslatePress</li>
</ul>
<h3>PERFORMANCE OPTIMIZED</h3>
<ul>
<li>Lightweight code</li>
<li>Minimal HTTP requests</li>
<li>Lazy loading support</li>
<li>Optimized database queries</li>
<li>Fast rendering</li>
<li>Mobile optimized</li>
</ul>
<h3>DEVELOPER FRIENDLY</h3>
<ul>
<li>Clean, well-documented code</li>
<li>Action and filter hooks</li>
<li>Template override support</li>
<li>Custom CSS options</li>
<li>REST API support</li>
</ul>
<h4>Multilingual Ready</h4>
<ul>
<li><a href="https://wpml.org/" rel="nofollow ugc">WPML</a></li>
<li><a href="https://wordpress.org/plugins/polylang/" rel="ugc">Polylang</a></li>
<li><a href="https://wordpress.org/plugins/qtranslate-x/" rel="ugc">qTranslate-x</a></li>
<li><a href="https://wordpress.org/plugins/gtranslate/" rel="ugc">GTranslate</a></li>
<li><a href="https://wordpress.org/plugins/google-language-translator/" rel="ugc">Google Language Translator</a></li>
<li><a href="https://wordpress.org/plugins/wpglobus/" rel="ugc">WPGlobus</a></li>
</ul>
<h4>Page Builders</h4>
<p>Works with:</p>
<ul>
<li>Gutenberg Block Editor</li>
<li>Elementor</li>
<li>WPBakery</li>
<li>Divi Builder</li>
<li>Beaver Builder</li>
<li>Oxygen Builder</li>
</ul>


FAQ Schema – Accordion, Tab, Slider & Gutenberg Block

There is no plugin section in the Wordpress menu.

Does not work

Create responsive FAQs with accordion, tabs, and slider layouts. Includes FAQ Schema markup, Gutenberg blocks, and Elementor widgets.

Tabs Shortcode vs FAQ Schema – Accordion, Tab, Slider & Gutenberg Block