A simple jQuery plugin that transforms a set of Bootstrap tabs into a Bootstrap accordion. It can be configured to perform this transformation based on the size of the container or viewport to provide responsive awesomeness to your buzzword-rich UI.

See the Github project for usage.

Press the button. Go on, press it.

Tabcordion also responds to the window size. Try resizing the browser window.

Home

Rhoncus magna nec enim, et proin aliquet mid, porta magnis. Augue dictumst! Turpis hac tristique nascetur. Porttitor ut urna. Tempor? Scelerisque vel, mattis rhoncus parturient amet, ut duis? In in massa vut, nunc porttitor a purus! Sed magnis massa nisi? Risus in turpis nunc augue cras odio! Nec scelerisque etiam cum rhoncus tincidunt nunc? Mauris augue facilisis sit? Proin lacus? Tempor? Urna dis rhoncus diam pellentesque, nascetur cursus, a nec eu porta enim ultricies et facilisis.

Scelerisque turpis! Sit proin odio egestas sed urna platea lundium, cursus odio hac.

Profile

Odio mattis, non ut! Porttitor nunc phasellus cras elementum, integer pulvinar mus tincidunt hac aenean dictumst ultricies duis, sit, ac sit tortor vel hac dolor? Etiam, hac purus a amet in parturient, natoque pulvinar, adipiscing ultrices proin augue dis dignissim! Elementum platea risus purus enim duis hac mus etiam turpis tristique amet augue cum, lorem. Pulvinar? Aliquam, scelerisque tempor sed. Ut rhoncus ac adipiscing adipiscing enim, parturient in cursus tristique, mid ac sagittis quis elit amet, montes nec, porttitor dignissim, mauris, in? Augue parturient, duis scelerisque, pellentesque, pid! Quis nec! Sed porta porttitor mus ac non, magna, amet quis, auctor etiam lundium, sed porta nisi! Odio ac est. Rhoncus odio. Quis egestas, odio dignissim? Nascetur est aliquet massa augue ridiculus.

A scelerisque ac nascetur augue? Nascetur platea habitasse elementum aliquam cras nunc integer rhoncus a adipiscing sagittis. Diam aliquam? Porttitor nisi adipiscing. Pulvinar, velit etiam augue sociis dis ac eros sit platea hac lundium vut cursus, sagittis mus integer, ultricies, tincidunt montes diam urna porttitor nunc sit, nunc platea sagittis odio penatibus in nec amet enim, eros lorem cum, tortor in. Sit eu! Porttitor magnis dapibus hac penatibus tincidunt augue pulvinar et, ut placerat ac nisi integer turpis porta, elit risus mauris? Pulvinar? Mus non lorem odio, ac! Sit. Augue porttitor aenean! Sit magnis lorem phasellus ac tincidunt purus! Amet integer in ac nec, natoque a turpis ridiculus nascetur. Mattis dignissim est sit? Ultrices magna, porta? Natoque sed dapibus.

Messages

Enim hac tristique elementum, nec rhoncus porttitor sagittis cum, sed dapibus! Augue tempor est porttitor, hac sit sed egestas, elit natoque, sociis magna scelerisque mauris amet tristique, non sed sit turpis.

Integer a aliquet! Ac pulvinar eros, eu diam, turpis et sit nisi parturient turpis in dapibus pellentesque et risus. Sit magna porta risus. Proin tincidunt ut purus phasellus dolor. Porta porttitor! Lorem est, vut sit nec et odio enim! Montes dapibus nascetur amet integer enim dolor elementum purus, porttitor, enim, mus ut arcu tempor tempor penatibus diam nisi arcu. Vut nunc aliquam enim sit, pellentesque lectus, mus? Phasellus porttitor natoque pulvinar porta dictumst elementum etiam elementum ridiculus, et facilisis, egestas, pulvinar pulvinar porttitor, odio cursus pulvinar ultrices, integer porta aliquet pulvinar, non porta ac lacus rhoncus non? Porta, ac proin tincidunt sit montes, dictumst montes et pulvinar! Augue et? Integer in, nascetur urna etiam ac a ac sed! Purus.

Settings

Arcu auctor, porttitor tincidunt, aliquam ut ut, placerat porta pulvinar dictumst, placerat dis, nunc vel, risus. Tortor habitasse etiam porttitor mid pulvinar amet, cum tristique, pellentesque, purus? Elementum dignissim ac! Ultricies! Adipiscing a, sociis, rhoncus, scelerisque ac, tristique dolor pid non pid egestas sed nec nec porta nascetur vut! Odio nunc porta, elementum auctor habitasse? Auctor? Ultricies sed nunc massa ultricies platea diam a sit dis lorem? Duis purus augue dapibus. Porttitor placerat, auctor est ut, rhoncus placerat urna, amet mid! Eros a vel eros? Nunc. Natoque? Aliquet purus in sit.

Mattis turpis in mid tincidunt placerat tortor tincidunt massa? Porta sagittis, lacus phasellus, diam? A eros eu in elit, mattis augue lundium penatibus. Porta nisi nunc in nascetur ac ut turpis ultricies, vel et augue! Lundium sit! Massa elementum! Et auctor, et turpis nunc cum eu magnis! Porta auctor lundium ultricies elementum sed enim cum adipiscing, sociis, in adipiscing, purus et. Cum sed. Facilisis lectus! Sed ac odio montes platea porttitor, porta sagittis adipiscing, porta scelerisque augue mauris eu integer elit, adipiscing ut?

Whip it… whip it good.

Home

Rhoncus magna nec enim, et proin aliquet mid, porta magnis. Augue dictumst! Turpis hac tristique nascetur. Porttitor ut urna. Tempor? Scelerisque vel, mattis rhoncus parturient amet, ut duis? In in massa vut, nunc porttitor a purus! Sed magnis massa nisi? Risus in turpis nunc augue cras odio! Nec scelerisque etiam cum rhoncus tincidunt nunc? Mauris augue facilisis sit? Proin lacus? Tempor? Urna dis rhoncus diam pellentesque, nascetur cursus, a nec eu porta enim ultricies et facilisis.

Scelerisque turpis! Sit proin odio egestas sed urna platea lundium, cursus odio hac.

Profile

Odio mattis, non ut! Porttitor nunc phasellus cras elementum, integer pulvinar mus tincidunt hac aenean dictumst ultricies duis, sit, ac sit tortor vel hac dolor? Etiam, hac purus a amet in parturient, natoque pulvinar, adipiscing ultrices proin augue dis dignissim! Elementum platea risus purus enim duis hac mus etiam turpis tristique amet augue cum, lorem. Pulvinar? Aliquam, scelerisque tempor sed. Ut rhoncus ac adipiscing adipiscing enim, parturient in cursus tristique, mid ac sagittis quis elit amet, montes nec, porttitor dignissim, mauris, in? Augue parturient, duis scelerisque, pellentesque, pid! Quis nec! Sed porta porttitor mus ac non, magna, amet quis, auctor etiam lundium, sed porta nisi! Odio ac est. Rhoncus odio. Quis egestas, odio dignissim? Nascetur est aliquet massa augue ridiculus.

A scelerisque ac nascetur augue? Nascetur platea habitasse elementum aliquam cras nunc integer rhoncus a adipiscing sagittis. Diam aliquam? Porttitor nisi adipiscing. Pulvinar, velit etiam augue sociis dis ac eros sit platea hac lundium vut cursus, sagittis mus integer, ultricies, tincidunt montes diam urna porttitor nunc sit, nunc platea sagittis odio penatibus in nec amet enim, eros lorem cum, tortor in. Sit eu! Porttitor magnis dapibus hac penatibus tincidunt augue pulvinar et, ut placerat ac nisi integer turpis porta, elit risus mauris? Pulvinar? Mus non lorem odio, ac! Sit. Augue porttitor aenean! Sit magnis lorem phasellus ac tincidunt purus! Amet integer in ac nec, natoque a turpis ridiculus nascetur. Mattis dignissim est sit? Ultrices magna, porta? Natoque sed dapibus.

Messages

Enim hac tristique elementum, nec rhoncus porttitor sagittis cum, sed dapibus! Augue tempor est porttitor, hac sit sed egestas, elit natoque, sociis magna scelerisque mauris amet tristique, non sed sit turpis.

Integer a aliquet! Ac pulvinar eros, eu diam, turpis et sit nisi parturient turpis in dapibus pellentesque et risus. Sit magna porta risus. Proin tincidunt ut purus phasellus dolor. Porta porttitor! Lorem est, vut sit nec et odio enim! Montes dapibus nascetur amet integer enim dolor elementum purus, porttitor, enim, mus ut arcu tempor tempor penatibus diam nisi arcu. Vut nunc aliquam enim sit, pellentesque lectus, mus? Phasellus porttitor natoque pulvinar porta dictumst elementum etiam elementum ridiculus, et facilisis, egestas, pulvinar pulvinar porttitor, odio cursus pulvinar ultrices, integer porta aliquet pulvinar, non porta ac lacus rhoncus non? Porta, ac proin tincidunt sit montes, dictumst montes et pulvinar! Augue et? Integer in, nascetur urna etiam ac a ac sed! Purus.

Settings

Arcu auctor, porttitor tincidunt, aliquam ut ut, placerat porta pulvinar dictumst, placerat dis, nunc vel, risus. Tortor habitasse etiam porttitor mid pulvinar amet, cum tristique, pellentesque, purus? Elementum dignissim ac! Ultricies! Adipiscing a, sociis, rhoncus, scelerisque ac, tristique dolor pid non pid egestas sed nec nec porta nascetur vut! Odio nunc porta, elementum auctor habitasse? Auctor? Ultricies sed nunc massa ultricies platea diam a sit dis lorem? Duis purus augue dapibus. Porttitor placerat, auctor est ut, rhoncus placerat urna, amet mid! Eros a vel eros? Nunc. Natoque? Aliquet purus in sit.

Mattis turpis in mid tincidunt placerat tortor tincidunt massa? Porta sagittis, lacus phasellus, diam? A eros eu in elit, mattis augue lundium penatibus. Porta nisi nunc in nascetur ac ut turpis ultricies, vel et augue! Lundium sit! Massa elementum! Et auctor, et turpis nunc cum eu magnis! Porta auctor lundium ultricies elementum sed enim cum adipiscing, sociis, in adipiscing, purus et. Cum sed. Facilisis lectus! Sed ac odio montes platea porttitor, porta sagittis adipiscing, porta scelerisque augue mauris eu integer elit, adipiscing ut?

Installation

bower install tabcordion

Dependencies

Depends on theBootstrap collapse plugin.