Blockshop - Custom tabs and accordions on product pages

You can add tabs to any RTE (rich text editor) areas to Product descriptions, Collection descriptions, Custom pages and Blog posts.

In the admin area, find an RTE field and press the "Show HTML" button. To do this, paste in the following snippets and replace the text content with your own. The top set of elements are the tabs themselves ("accordion headings", and second set of elements ("accordion content") is the content that corresponds to each tab.

Accordion Code Snippet

<ul class="accordion headings">
    <li>tab number 1</li>
    <li>tab number 2</li>
    <li>tab number 3</li>
</ul>
<ul class="accordion content">
    <li>
        <p>Content for tab number 1...</p>
    </li>
    <li>
        <p>Content for tab number 2...</p>
    </li>
    <li>
        <p>Content for tab number 3...</p>
    </li>
</ul>

Horizontal Tabs Snippet

<ul class="tabs-horizontal headings">
    <li>tab number 1</li>
    <li>tab number 2</li>
    <li>tab number 3</li>
</ul>
<ul class="tabs content">
    <li>
        <p>Content for tab number 1...</p>
    </li>
    <li>
        <p>Content for tab number 2...</p>
    </li>
    <li>
        <p>Content for tab number 3...</p>
    </li>
</ul>

Vertical Tabs Snippet

<ul class="tabs-vertical headings">
    <li>tab number 1</li>
    <li>tab number 2</li>
    <li>tab number 3</li>
</ul>
<ul class="tabs content">
    <li>
        <p>Content for tab number 1...</p>
    </li>
    <li>
        <p>Content for tab number 2...</p>
    </li>
    <li>
        <p>Content for tab number 3...</p>
    </li>
</ul>

Still need help? Contact Us Contact Us