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

Parbat Pithiya

<p>This plugin adds a “Tab Block” section to the admin panel which allows you to create tabbed content for your website the easy way. You can quickly add your content to your different tabs, choose a color, re-order them at anytime and display them anywhere with a simple shortcode. What you see is what you get, and it’s totally free.</p>
<h4>Responisve Tab Blocks Shortcode</h4>
<blockquote>
<p><code>[grtb id=xx]</code></p>
</blockquote>
<h4>Available fields</h4>
<ul>
<li>Tab Title</li>
<li>Tab Icon<br />
** Block Title<br />
** Block Icon<br />
** Readmore link<br />
** Block Content (text/images/anything)</li>
</ul>
<h4>Available settings</h4>
<ul>
<li>Breakpoint (decide when the tabs should shrink into an accordion)</li>
<li>Styles</li>
</ul>
<h4>Usage</h4>
<p>Go to <a href="https://9code.info/plugin-for-wordpress-responsive-tab-with-blocks-content-and-links/docs/" rel="nofollow ugc">the plugin’s documentation</a> if you need more information on how to use this plugin.</p>
<h4>Support</h4>
<p>Find help in <a href="https://9code.info/support/" rel="nofollow ugc">our support plaftorm</a> for this plugin (we’ll answer you fast, promise).</p>


Responsive Tab with Blocks

Im very exited to adding more feature on this plugin. If you like then please give me 5 star rating that will motivated me

First release

A responsive & clean way to display your content. Create new tabs nd blocks as per your need in no-time custom type and copy-paste the shortcode i …

Accordion Shortcode vs Responsive Tab with Blocks