Skip to content

Add tabs to products and pages

You can add tabs to product descriptions and page content with some simple html markup.

Navigate to a product page or page's rich text editor and click the show HTML <> button.

main menu demo

Below are three types of tabs, copy and paste the code snippet into the html area and replace with your own content.

Horizontal tabs

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

main menu demo

Vertical tabs

<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 1...</p>
    </li>
    <li>
        <p>Content for tab 2...</p>
    </li>
    <li>
        <p>Content for tab 3...</p>
    </li>
</ul>

Accordion tabs

<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 1...</p>
    </li>
    <li>
        <p>Content for tab 2...</p>
    </li>
    <li>
        <p>Content for tab 3...</p>
    </li>
</ul>