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:


Multiple Tabs

Tab 1 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.

 

Tab 2 Youtube Embed


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 3 Vimeo Embed


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 Multiple Tabs Code:


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:

Anchored Tabs

Anchored Tab 1 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.

 

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:

Top ↑