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

DOTonPAPER

<p>View <a href="http://dopdemo.net/wp/dop-shortcodes/" rel="nofollow ugc">demo</a> here.</p>
<p>This is a collections of shortcodes we use in our themes. We always accept feedback and constructive criticism so if you have something to say please use the <a href="https://wordpress.org/support/plugin/dop-shortcodes" rel="ugc">support forum</a>.</p>
<h4>Shortcodes List</h4>
<ul>
<li>Accordions</li>
<li>Containers</li>
<li>Grids</li>
<li>Images</li>
<li>Lists</li>
<li>Progress Bars</li>
<li>Separators</li>
<li>Social Icons</li>
<li>Tabs</li>
<li>Tables</li>
<li>Toggles</li>
</ul>
<h4>Shortcodes Examples</h4>
<p>Please view <a href="http://help.dotonpaper.net/dop-shortcodes-wordpress-plugin.html" rel="nofollow ugc">documentation</a> for more details.</p>
<h4>Accordion</h4>
<pre><code>[dopaccordions]
    [dopaccordion title="Title 1"]text[/dopaccordion]
    [dopaccordion title="Title 2"]text[/dopaccordion]
    [dopaccordion title="Title 3"]text[/dopaccordion]
[/dopaccordions]
</code></pre>
<h4>Container</h4>
<pre><code>[dopcontainer]text[/dopcontainer]
</code></pre>
<h4>Grid</h4>
<pre><code>[dopgridrow]
    [dopgrid size="1/3"]<h5>1/3</h5>text[/dopgrid]
    [dopgrid size="1/3"]<h5>1/3</h5>text[/dopgrid]
    [dopgrid size="1/3"]<h5>1/3</h5>text[/dopgrid]
[/dopgridrow]
</code></pre>
<h4>Image</h4>
<pre><code>[dopimg align=left height=200 width=100%]<img src="image path" alt="" />[/dopimg]
</code></pre>
<h4>List</h4>
<pre><code>[doplist]
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
[/doplist]
</code></pre>
<h4>Progress Bar</h4>
<pre><code>[dopprogressbar progress=70]70%[/dopprogressbar]
</code></pre>
<h4>Separator</h4>
<pre><code>[dopseparator]
</code></pre>
<h4>Social Icon</h4>
<pre><code>[dopsocialicon network=facebook]Facebook[/dopsocialicon]
</code></pre>
<h4>Tabs</h4>
<pre><code>[doptabs]
    [doptab title="Tab 1"]text[/doptab]
    [doptab title="Tab 2"]text[/doptab]
    [doptab title="Tab 3"]text[/doptab]
[/doptabs]
</code></pre>
<h4>Table</h4>
<pre><code>[doptable]
<thead>
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>
    </tr>
</thead>
<tbody>
    <tr class="odd">
        <td>Etiam nec</td>
        <td>aliquam</td>
        <td>erat</td>
        <td>nulla sodales dui aenean eu mollis lorem</td>
    </tr>
    <tr>
        <td>Etiam nec</td>
        <td>aliquam</td>
        <td>erat</td>
        <td>nulla sodales dui aenean eu mollis lorem</td>
    </tr>
    <tr class="odd">
        <td>Etiam nec</td>
        <td>aliquam</td>
        <td>erat</td>
        <td>nulla sodales dui aenean eu mollis lorem</td>
    </tr>
    <tr>
        <td>Etiam nec</td>
        <td>aliquam</td>
        <td>erat</td>
        <td>nulla sodales dui aenean eu mollis lorem</td>
    </tr>
    <tr class="odd">
        <td>Etiam nec</td>
        <td>aliquam</td>
        <td>erat</td>
        <td>nulla sodales dui aenean eu mollis lorem</td>
    </tr>
</tbody>
[/doptable]
</code></pre>
<h4>Toggle</h4>
<pre><code>[doptoggle title="Toggle"]text[/doptoggle]
</code></pre>


DOP Shortcodes

This is a collections of shortcodes we use in our themes.

Accordion Shortcode vs DOP Shortcodes