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

ikhodal

<p>Archive Posts, Pages & Categories Accordion helps display WordPress archive content in a responsive accordion layout with AJAX pagination, widgets, shortcode support, and customizable templates.</p>
<p>Visitors can browse posts by month, year, category, tag, or page using an interactive accordion interface designed to improve content discovery and user engagement.</p>
<h4>Get Support</h4>
<ul>
<li><a href="mailto:jayikhodal@gmail.com" rel="nofollow ugc">Click Here for Support</a></li>
</ul>
<h4>Free Version Features</h4>
<ul>
<li>Ajax based without page refresh loading archive posts.</li>
<li>Supports responsive and customizable designs.</li>
<li>Five clean and modern templates.</li>
<li>Allows to configure unlimited widget for the content area and sidebar.</li>
<li>Load next archive posts by ‘load more’ ajax functionality.</li>
<li>Design text and background color settings to change styles of the widget heading, month and year, post title. </li>
<li>Lightweight and optimized AJAX loading.</li>
<li>SEO-friendly archive navigation.</li>
</ul>
<h4>Premium Version Features</h4>
<ul>
<li>Custom settings available to hide or show post title, cart button, price, animation over image, post image, pagination, post short content and read more link.</li>
<li>Dynamic admin settings to change maximum width and height of images.</li>
<li>There are three types of ajax based pagination available like load more products, next-previous links and simple numeric pagination.  </li>
<li>Search functionality by post name and category from the each panel. </li>
<li>Supports custom post types.</li>
<li>Supports unlimited shortcodes for the content area. </li>
<li>Supports accordion list and grid posts views.</li>
<li>Allows hide/show post count with each accordion pane.</li>
<li>Hide empty categories.</li>
<li>10+ modern templates. </li>
<li>40+ beautiful animation effects. </li>
<li>Short by or Order by month or year ascending and descending.</li>
<li>Hide/Show various categories from accordion panel.</li>
<li>Settings to open a month or year accordion pane by default.</li>
<li>Supports “All” label accordion pane to load all accordion’s posts.</li>
<li>RTL Support.</li>
<li>Hide/Show posted date with posts.</li>
<li>Hide/Show comments count with posts.</li>
<li>Allows to set space between posts items in pixels. </li>
<li>Hide/show author image and name. </li>
</ul>
<h4>Support Details</h4>
<ul>
<li>We do support for all the plugins and extensions, but please understand that support for premium plugins takes priority.</li>
</ul>
<h4>Other Recommended Amazing WordPress Accordion Plugins</h4>
<p>You might like following recommended free and paid plugins that supports accordion widget and shortcode creation using an amazing ajax load more functionality for the sidebar and content area.</p>
<ul>
<li><a href="https://wordpress.org/plugins/category-and-post-accordion-panel/" rel="ugc">Category and Post WordPress Accordion Panel</a> </li>
<li><a href="https://wordpress.org/plugins/accordion-panel-for-category-and-products/" rel="ugc">Category and Products Woocommerce Accordion Panel</a></li>
<li><a href="https://wordpress.org/plugins/tabular-price-pane/" rel="ugc">Price and Products Woocommerce Accordion Panel</a></li>
</ul>
<h4>Posts/Products list and grid view with Ajax pagination</h4>
<ul>
<li><a href="https://wordpress.org/plugins/ajax-load-more-post/" rel="ugc">Ajax Load More Post</a> </li>
<li><a href="https://wordpress.org/plugins/wc-load-more-product/" rel="ugc">Woocommerce Load More Product</a> </li>
</ul>
<h4>Want to create new language translation for your site?</h4>
<ul>
<li><a href="http://www.ikhodal.com/support" rel="nofollow ugc">Create a support ticket for the multi languages or any other help</a></li>
</ul>


Archive Posts, Pages & Categories Accordion

Display WordPress archive posts, pages, tags, and categories in a responsive accordion layout with AJAX pagination, widgets, and shortcode support.

Accordion Shortcode vs Archive Posts, Pages & Categories Accordion