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.

AppGlut

<p>The <strong>ShowCaseGlut</strong> plugin allows you to create and manage Tabs and Accordions on your WordPress website easily.<br />
With this plugin, you can create custom post types for Tabs and Accordions and display them anywhere on your site using shortcodes.</p>
<p>Tabs and Accordions are two essential UI elements that enhance your site’s interactivity, allowing users to view content in a compact and stylish way.</p>
<h3>Key Features:</h3>
<ul>
<li><strong>Custom Post Types for Tabs & Accordions</strong>: Easily create and manage content for Tabs and Accordions from the WordPress admin.</li>
<li><strong>Shortcodes for Displaying Content</strong>: Use shortcodes to display specific Tabs or Accordions on any page or post.</li>
<li><strong>Flexible Shortcode Parameters</strong>: Display content by providing comma-separated post IDs in the shortcode.</li>
<li><strong>Gutenberg Support</strong>: Full compatibility with the WordPress block editor (Gutenberg).</li>
<li><strong>Simple and Easy to Use</strong>: The plugin is designed to be simple, requiring no extra configurations or coding.</li>
</ul>
<h3>Features</h3>
<ol>
<li>
<p><strong>Custom Post Types</strong>:</p>
<ul>
<li>Tabs (<code>ShowcaseGlut Tab</code>): Manage your Tabs content from the WordPress admin.</li>
<li>Accordions (<code>ShowcaseGlut Accordion</code>): Manage your Accordion content in a similar way.</li>
</ul>
</li>
<li>
<p><strong>Shortcodes</strong>:</p>
<ul>
<li><code>[showcaseglut type="tab" ids="1,2,3"]</code> – Displays specific tabs by IDs.</li>
<li><code>[showcaseglut type="accordion" ids="4,5,6"]</code> – Displays specific accordions by IDs.</li>
</ul>
</li>
<li>
<p><strong>Customizable Output</strong>:</p>
<ul>
<li>For Tabs: Displays tab links and content in a tabbed layout.</li>
<li>For Accordions: Displays accordion items with collapsible content.</li>
</ul>
</li>
<li>
<p><strong>Gutenberg Support</strong>: Full compatibility with the new WordPress block editor for easy integration within your pages or posts.</p>
</li>
</ol>
<h3>How It Works</h3>
<h3>Tabs:</h3>
<ul>
<li>Create a new post under the “ShowcaseGlut Tabs” section in the WordPress admin.</li>
<li>Add content in the editor, such as titles and descriptions.</li>
<li>Use the shortcode <code>[showcaseglut type="tab" ids="1,2,3"]</code> to display specific tabs by their IDs on any page or post.</li>
<li>This will generate tabbed navigation with content corresponding to each tab, allowing users to click between different sections.</li>
</ul>
<h3>Accordions:</h3>
<ul>
<li>Similarly, create new posts under the “ShowcaseGlut Accordions” section.</li>
<li>Add titles and content in the editor for each accordion item.</li>
<li>Use the shortcode <code>[showcaseglut type="accordion" ids="4,5,6"]</code> to display specific accordion items on a page.</li>
<li>The accordion will be displayed with expandable sections, where users can click to reveal content.</li>
</ul>
<h3>Example Usage:</h3>
<ul>
<li><strong>Tab shortcode</strong>: <code>[showcaseglut type="tab" ids="1,2,3"]</code>
<ul>
<li>This will display the tabs with the IDs <code>1</code>, <code>2</code>, and <code>3</code>.</li>
</ul>
</li>
<li><strong>Accordion shortcode</strong>: <code>[showcaseglut type="accordion" ids="4,5,6"]</code>
<ul>
<li>This will display the accordion items with the IDs <code>4</code>, <code>5</code>, and <code>6</code>.</li>
</ul>
</li>
</ul>


ShowCaseGlut

ShowCaseGlut Plugin for WordPress helps you create beautiful Tabs and Accordions on your website with custom post types and flexible shortcodes.

Tabs Shortcode vs ShowCaseGlut