addTabs Demo Page

jQuery addTabs plugin. Easily add tabs to your webpage. This simple plugin will work straight out of the box for most use cases. However if you need more power there are plenty of events and callbacks that you can hook into as demonstrated below.

Want to know how these demos have been made? Check out the source code or download the addTabs plugin from Github, the demo files are included!

Full documentation can be found on our Github project page.

Trigger Actions

This demo shows how you can interact with addTabs through the event API, apart from the destroy and reinit which work by accessing internal functions directly through the element the plugin was launched on. Click the links below the tabs to see what the events and functions do.

Tab One Tab Two Tab Three Tab Four Tab Five

Velit sit urna integer eros rhoncus! Pellentesque, habitasse. Rhoncus, ut facilisis? Elit natoque porttitor dignissim eu rhoncus hac tristique aliquam risus? Pulvinar vut. Diam lacus tortor, penatibus nisi nunc magna, enim a pulvinar, platea sociis adipiscing! Sociis in! Habitasse! Sagittis! Porta diam proin dignissim a lundium dignissim urna?

Mus mid nisi rhoncus ultricies odio! Porttitor.Dignissim! Enim mauris habitasse a dolor dignissim platea, ac turpis? Ac, tortor ut amet pellentesque sagittis odio. Elementum porta et. Lacus diam risus diam rhoncus.

Sociis risus, quis dictumst purus augue nascetur odio integer cursus pulvinar massa. Ac odio, lorem vel sit dictumst quis a hac nisi ac tincidunt non? Nec integer lectus? Ridiculus sit elementum facilisis.

Hac duis, pulvinar, duis etiam dapibus aliquam natoque magnis. Facilisis penatibus cras eros ut. Ac proin hac a sit placerat amet! Pulvinar ac nec, elementum aliquam! Montes ultrices, aliquet augue, enim pid etiam vel in eu pulvinar nunc enim. Tristique, adipiscing nunc in lundium, amet, et aliquet amet, lundium, et? Montes in natoque magna nisi.

Diam? Cum in pellentesque placerat placerat? Etiam placerat dapibus! Habitasse mattis vel et enim nec, est a nisi porta pulvinar et! Proin. Arcu massa. Nunc in ultrices turpis nisi! Tristique eros dis, rhoncus! In. Scelerisque est? Augue tristique porttitor lectus augue? Egestas lundium, vel dapibus, nunc? Mus scelerisque pellentesque? Sed tincidunt integer, hac parturient.

Sed penatibus, elit adipiscing urna, dignissim amet enim augue? Ac. Aenean? Proin, etiam diam non, in, nec tortor augue odio, porttitor! Massa placerat, adipiscing penatibus cum urna, aenean eu sagittis, porta adipiscing augue tortor, tincidunt aliquet!

Habitasse pulvinar massa proin hac cum sit in turpis? Pulvinar placerat duis duis nisi enim enim! Placerat scelerisque massa enim augue! Platea placerat etiam, est augue scelerisque sed est in, porta, natoque nascetur magna, pid rhoncus, phasellus adipiscing mus.

Placerat ut natoque. Penatibus, magnis. Et facilisis. Scelerisque, sit, purus. Purus arcu tincidunt adipiscing, sagittis. Aliquet? Tortor elementum sed purus?

Diam magnis cum risus eros lorem augue lundium, urna purus elementum nunc turpis? Mauris, enim ac adipiscing, ac, hac tempor natoque, pulvinar, pellentesque, dolor purus porttitor mauris pulvinar, mid sed, mauris non massa! Ultrices ridiculus. Facilisis, porttitor nunc augue, nunc montes in! Augue amet!

  • Cursus tristique arcu? Pulvinar lacus eros auctor?
  • Amet lundium hac odio ridiculus sagittis, augue ut porttitor?
  • porta duis lectus? Nunc duis a cras enim? Massa nunc.
  • augue ut porttitor rhoncus integer pulvinar aenean adipiscing ridiculus sed?
  • Tincidunt ac turpis arcu a, diam? Nisi? Ultrices nec. Sagittis pulvinar.
  • Go To Index
  • Go To Id
  • Previous
  • Next
  • Destroy
  • Rebuild

Lazy Load

addTabs can handle the loading of images when the tab is shown. This is achieved by adding the src of the image into a data-src attribute. A spinner can be shown whilst the image is loading by wrapping the image in a div with a class of .lazy this element will then be given a class of .loading whilst the image is loading.

This demo also hooks into the addTab-images-loaded check out the console to see the result.

Tab One Tab Two Tab Three Tab Gallery

Velit sit urna integer eros rhoncus! Pellentesque, habitasse. Rhoncus, ut facilisis? Elit natoque porttitor dignissim eu rhoncus hac tristique aliquam risus? Pulvinar vut. Diam lacus tortor, penatibus nisi nunc magna, enim a pulvinar, platea sociis adipiscing! Sociis in! Habitasse! Sagittis! Porta diam proin dignissim a lundium dignissim urna?

Mus mid nisi rhoncus ultricies odio! Porttitor.Dignissim! Enim mauris habitasse a dolor dignissim platea, ac turpis? Ac, tortor ut amet pellentesque sagittis odio. Elementum porta et. Lacus diam risus diam rhoncus.

Sociis risus, quis dictumst purus augue nascetur odio integer cursus pulvinar massa. Ac odio, lorem vel sit dictumst quis a hac nisi ac tincidunt non? Nec integer lectus? Ridiculus sit elementum facilisis.

Hac duis, pulvinar, duis etiam dapibus aliquam natoque magnis. Facilisis penatibus cras eros ut. Ac proin hac a sit placerat amet! Pulvinar ac nec, elementum aliquam! Montes ultrices, aliquet augue, enim pid etiam vel in eu pulvinar nunc enim. Tristique, adipiscing nunc in lundium, amet, et aliquet amet, lundium, et? Montes in natoque magna nisi.

Diam? Cum in pellentesque placerat placerat? Etiam placerat dapibus! Habitasse mattis vel et enim nec, est a nisi porta pulvinar et! Proin. Arcu massa. Nunc in ultrices turpis nisi! Tristique eros dis, rhoncus! In. Scelerisque est? Augue tristique porttitor lectus augue? Egestas lundium, vel dapibus, nunc? Mus scelerisque pellentesque? Sed tincidunt integer, hac parturient.

Sed penatibus, elit adipiscing urna, dignissim amet enim augue? Ac. Aenean? Proin, etiam diam non, in, nec tortor augue odio, porttitor! Massa placerat, adipiscing penatibus cum urna, aenean eu sagittis, porta adipiscing augue tortor, tincidunt aliquet!

Habitasse pulvinar massa proin hac cum sit in turpis? Pulvinar placerat duis duis nisi enim enim! Placerat scelerisque massa enim augue! Platea placerat etiam, est augue scelerisque sed est in, porta, natoque nascetur magna, pid rhoncus, phasellus adipiscing mus.

Placerat ut natoque. Penatibus, magnis. Et facilisis. Scelerisque, sit, purus. Purus arcu tincidunt adipiscing, sagittis. Aliquet? Tortor elementum sed purus?

Default tab and Re-initialise with new options

This demo shows how you can set the default tab to somthing other than the default (Tab 1) through the html attribute "data-default-tab", the tabs below will start on tab 3.

Also if you click the reinitialise button below you can see how its possible to relaunch the plugin with new options and callbacks. Once clicked an alert will fire on each tab change and the active link class will change from "active" to "active2".

Tab One Tab Two Tab Three

Velit sit urna integer eros rhoncus! Pellentesque, habitasse. Rhoncus, ut facilisis? Elit natoque porttitor dignissim eu rhoncus hac tristique aliquam risus? Pulvinar vut. Diam lacus tortor, penatibus nisi nunc magna, enim a pulvinar, platea sociis adipiscing! Sociis in! Habitasse! Sagittis! Porta diam proin dignissim a lundium dignissim urna?

Mus mid nisi rhoncus ultricies odio! Porttitor.Dignissim! Enim mauris habitasse a dolor dignissim platea, ac turpis? Ac, tortor ut amet pellentesque sagittis odio. Elementum porta et. Lacus diam risus diam rhoncus.

Velit sit urna integer eros rhoncus! Pellentesque, habitasse. Rhoncus, ut facilisis? Elit natoque porttitor dignissim eu rhoncus hac tristique aliquam risus? Pulvinar vut. Diam lacus tortor, penatibus nisi nunc magna, enim a pulvinar, platea sociis adipiscing! Sociis in! Habitasse! Sagittis! Porta diam proin dignissim a lundium dignissim urna?

Mus mid nisi rhoncus ultricies odio! Porttitor.Dignissim! Enim mauris habitasse a dolor dignissim platea, ac turpis? Ac, tortor ut amet pellentesque sagittis odio. Elementum porta et. Lacus diam risus diam rhoncus.

Velit sit urna integer eros rhoncus! Pellentesque, habitasse. Rhoncus, ut facilisis? Elit natoque porttitor dignissim eu rhoncus hac tristique aliquam risus? Pulvinar vut. Diam lacus tortor, penatibus nisi nunc magna, enim a pulvinar, platea sociis adipiscing! Sociis in! Habitasse! Sagittis! Porta diam proin dignissim a lundium dignissim urna?

Mus mid nisi rhoncus ultricies odio! Porttitor.Dignissim! Enim mauris habitasse a dolor dignissim platea, ac turpis? Ac, tortor ut amet pellentesque sagittis odio. Elementum porta et. Lacus diam risus diam rhoncus.

  • Reinitialise

Callbacks

This demo uses the before and after show callbacks, switch between the tabs to see the amount of images increase with each click, check out the console to see the output.

Custom Markup

This demo shows how you can use custom markup for your tabs. It may not look great but the tab content still changes!!!

  • Tab One
  • Tab Two
  • Tab Three
Tab 1 content
Tab 2 Content
Tab 3 Content

© Philip Rowe 2014