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

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.

Accordion Shortcode vs ShowCaseGlut