Tabs |

Single Tab

Image + Text

Et excepturi temporibus reprehenderit sit cupiditate non

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed orci a tellus aliquam finibus eu in elit. Maecenas lobortis velit vitae ex imperdiet, at dignissim nunc imperdiet. Curabitur eu finibus mauris. Duis quis massa urna. Donec faucibus purus mattis ex finibus pulvinar. Sed eu quam odio. Quisque rutrum lectus ut felis cursus, eget vestibulum diam vulputate. Nunc tempor quis neque a faucibus.

Example Single Tab Code:

{tab=Image + Text}
<img src="/wp-content/uploads/2015/07/3f364e93-7a4b-36c8-8ed5-0ccdebb494dd-150x150.jpg" alt="Et excepturi temporibus reprehenderit sit cupiditate non" width="150" height="150" class="size-thumbnail wp-image-256" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed orci a tellus aliquam finibus eu in elit. Maecenas lobortis velit vitae ex imperdiet, at dignissim nunc imperdiet. Curabitur eu finibus mauris. Duis quis massa urna. Donec faucibus purus mattis ex finibus pulvinar. Sed eu quam odio. Quisque rutrum lectus ut felis cursus, eget vestibulum diam vulputate. Nunc tempor quis neque a faucibus.
{/tabs}

{tab=Image + Text}

{/tabs}

Multiple Tabs

Tab 1 Image + Text

Tab 2 Youtube Embed

Tab 3 Vimeo Embed

Example Multiple Tabs Code:

{tab=Tab 1 Image + Text}
<img src="/wp-content/uploads/2015/07/3f364e93-7a4b-36c8-8ed5-0ccdebb494dd-150x150.jpg" alt="Et excepturi temporibus reprehenderit sit cupiditate non" width="150" height="150" class="size-thumbnail wp-image-256" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed orci a tellus aliquam finibus eu in elit. Maecenas lobortis velit vitae ex imperdiet, at dignissim nunc imperdiet. Curabitur eu finibus mauris. Duis quis massa urna. Donec faucibus purus mattis ex finibus pulvinar. Sed eu quam odio. Quisque rutrum lectus ut felis cursus, eget vestibulum diam vulputate. Nunc tempor quis neque a faucibus.
{tab=Tab 2 Youtube Embed}
<iframe width="500" height="281" src="https://www.youtube.com/embed/80rzS9sP1vo" frameborder="0" allowfullscreen></iframe>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed orci a tellus aliquam finibus eu in elit. Maecenas lobortis velit vitae ex imperdiet, at dignissim nunc imperdiet. Curabitur eu finibus mauris. Duis quis massa urna. Donec faucibus purus mattis ex finibus pulvinar. Sed eu quam odio. Quisque rutrum lectus ut felis cursus, eget vestibulum diam vulputate. Nunc tempor quis neque a faucibus.
{tab=Tab 3 Vimeo Embed}
<iframe src="https://player.vimeo.com/video/133202655" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed orci a tellus aliquam finibus eu in elit. Maecenas lobortis velit vitae ex imperdiet, at dignissim nunc imperdiet. Curabitur eu finibus mauris. Duis quis massa urna. Donec faucibus purus mattis ex finibus pulvinar. Sed eu quam odio. Quisque rutrum lectus ut felis cursus, eget vestibulum diam vulputate. Nunc tempor quis neque a faucibus.
{/tabs}

{tab=Tab 1 Image + Text}

{tab=Tab 2 Youtube Embed}

{tab=Tab 3 Vimeo Embed}

{/tabs}

Anchored Tabs Links/Menu

Notes:
To link tabs with anchors you must add tabs title to anchors
(example: ?post=1#tabs1) where “1” is the post id.

If you tabs use whitespace, replace it with %20
(example: ?post=1#tabs%201)

Also, a small bit of js to reload the page to the correct tab
(example: onclick="location.reload();")

Or, to open in a new browser tab
(example: onclick="window.open(this.href,'popupwindow');return false;"

Example Anchor Link Code:

Open in the same tab:
<a href="?post=506#Anchored%20Tab%201%20Image%20+%20Text" onclick="location.reload();">Anchored Tab 1 Image + Text</a>
<a href="?post=506#Anchored%20Tab%202%20Youtube%20Embed" onclick="location.reload(true);">Anchored Tab 2 Youtube Embed</a>
<a href="?post=506#Anchored%20Tab%203%20Vimeo%20Embed" onclick="location.reload(false);">Anchored Tab 3 Vimeo Embed</a>

Open in a new tab:
<a href="?post=506#Anchored%20Tab%201%20Image%20+%20Text" onclick="window.open(this.href,'popupwindow');return false;">Anchored Tab 1 Image + Text</a>

Open in the same tab:

<a href="?post=506#Anchored%20Tab%201%20Image%20+%20Text" onclick="location.reload();">Anchored Tab 1 Image + Text</a>

<a href="?post=506#Anchored%20Tab%202%20Youtube%20Embed" onclick="location.reload(true);">Anchored Tab 2 Youtube Embed</a>

<a href="?post=506#Anchored%20Tab%203%20Vimeo%20Embed" onclick="location.reload(false);">Anchored Tab 3 Vimeo Embed</a>

Open in a new tab:

<a href="?post=506#Anchored%20Tab%201%20Image%20+%20Text" onclick="window.open(this.href,'popupwindow');return false;">Anchored Tab 1 Image + Text</a>

Anchored Tabs

Anchored Tab 1 Image + Text

Anchored Tab 2 Youtube Embed

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce viverra, mi sit amet lacinia aliquet, velit dui volutpat elit, id lacinia quam lacus sed nisl. Suspendisse potenti. Donec tincidunt, nunc nec tempus dictum, enim libero porta massa, et pharetra urna elit sit amet massa. Sed lobortis scelerisque mattis. Aenean vehicula sagittis sapien. Nulla pulvinar mattis quam, non eleifend quam elementum vel. Nunc sed dui erat. Curabitur aliquam velit quis libero condimentum rutrum. Donec egestas dui sed pharetra tempor. Phasellus rutrum, lectus ac varius malesuada, lacus nulla pretium velit, non luctus enim lorem semper risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut sollicitudin fringilla nibh, id rutrum lectus congue sit amet.

Anchored Tab 3 Vimeo Embed

Sed non augue elementum, faucibus erat at, dignissim turpis. Mauris posuere neque vitae nunc efficitur, sit amet tincidunt orci pretium. Aenean in enim in nisl tristique tempus. Vestibulum dapibus elit eros, vel ornare justo pulvinar id. Pellentesque facilisis metus eu viverra laoreet. Nam non est metus. Etiam nec nisi lacinia, feugiat mi quis, tempor tellus. Maecenas blandit luctus nisl, vel facilisis lacus aliquet viverra. Vivamus lacinia est at turpis consectetur auctor. Nullam non dignissim lacus, sed mollis metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam rutrum eleifend nisl fermentum interdum. Cras ullamcorper luctus odio vitae imperdiet. Nulla diam nunc, viverra quis felis vel, bibendum malesuada nibh.

Example Anchor Tab Code:

{tab=Anchored Tab 1 Image + Text}
<img src="/wp-content/uploads/2015/07/3f364e93-7a4b-36c8-8ed5-0ccdebb494dd-150x150.jpg" alt="Et excepturi temporibus reprehenderit sit cupiditate non" width="150" height="150" class="size-thumbnail wp-image-256" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed orci a tellus aliquam finibus eu in elit. Maecenas lobortis velit vitae ex imperdiet, at dignissim nunc imperdiet. Curabitur eu finibus mauris. Duis quis massa urna. Donec faucibus purus mattis ex finibus pulvinar. Sed eu quam odio. Quisque rutrum lectus ut felis cursus, eget vestibulum diam vulputate. Nunc tempor quis neque a faucibus.
{tab=Anchored Tab 2 Youtube Embed}
<iframe width="500" height="281" src="https://www.youtube.com/embed/80rzS9sP1vo" frameborder="0" allowfullscreen></iframe>

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce viverra, mi sit amet lacinia aliquet, velit dui volutpat elit, id lacinia quam lacus sed nisl. Suspendisse potenti. Donec tincidunt, nunc nec tempus dictum, enim libero porta massa, et pharetra urna elit sit amet massa. Sed lobortis scelerisque mattis. Aenean vehicula sagittis sapien. Nulla pulvinar mattis quam, non eleifend quam elementum vel. Nunc sed dui erat. Curabitur aliquam velit quis libero condimentum rutrum. Donec egestas dui sed pharetra tempor. Phasellus rutrum, lectus ac varius malesuada, lacus nulla pretium velit, non luctus enim lorem semper risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut sollicitudin fringilla nibh, id rutrum lectus congue sit amet.
{tab=Anchored Tab 3 Vimeo Embed}
<iframe src="https://player.vimeo.com/video/133202655" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Sed non augue elementum, faucibus erat at, dignissim turpis. Mauris posuere neque vitae nunc efficitur, sit amet tincidunt orci pretium. Aenean in enim in nisl tristique tempus. Vestibulum dapibus elit eros, vel ornare justo pulvinar id. Pellentesque facilisis metus eu viverra laoreet. Nam non est metus. Etiam nec nisi lacinia, feugiat mi quis, tempor tellus. Maecenas blandit luctus nisl, vel facilisis lacus aliquet viverra. Vivamus lacinia est at turpis consectetur auctor. Nullam non dignissim lacus, sed mollis metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam rutrum eleifend nisl fermentum interdum. Cras ullamcorper luctus odio vitae imperdiet. Nulla diam nunc, viverra quis felis vel, bibendum malesuada nibh.
{/tabs}

{tab=Anchored Tab 1 Image + Text}

{tab=Anchored Tab 2 Youtube Embed}

{tab=Anchored Tab 3 Vimeo Embed}

{/tabs}

Top ↑