Responsive Accordion Tabs

Codebase Tabs

I have the HTML Markup from Tabs and should be tabs on small accordion on medium tabs on large

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.


I have the HTML Markup from Tabs and should be accordion on small tabs on medium accordion on large

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Codebase Accordion

I have the HTML Markup from Accordion and should be accordion on small tabs on medium accordion on large


I have the HTML Markup from Accordion and should be tabs on small accordion on medium tabs on large

Nested Elements Tabs Markup

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.


Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Nested Elements Accordion Markup

Nested Elements Mixed Markup

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

  • Accordion 1
    I would start in the open state, due to using the `is-active` state class.
  • Accordion 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.


Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

  • Accordion 1
    I would start in the open state, due to using the `is-active` state class.
  • Accordion 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.

Extreme Nesting

Vertical example only with codebase tabs on first level

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Different data-link-class and data-panel-class

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.