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

  • 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.

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

  • 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. Quidem optio nihil natus incidunt. Esse, in nesciunt? Quo odit ipsam facilis, consequatur nesciunt aliquid ipsa accusantium repellendus totam doloremque officiis quia ad qui quibusdam neque deserunt saepe. Inventore amet sed cupiditate ipsam animi, quod est officiis ratione expedita vitae, facilis tenetur ex quaerat fugit mollitia vero, esse labore eos. Ullam minima nemo, dicta neque numquam cumque iusto, ratione quia blanditiis accusantium id adipisci obcaecati eum aliquid consequatur eveniet. Culpa nihil, dolore quasi eveniet est ipsa accusamus asperiores voluptates autem? Mollitia consequuntur iste maxime, est rerum, quod quam voluptatum id natus commodi? Maxime vel debitis optio blanditiis dolorem, eum minus reprehenderit. Mollitia natus similique amet adipisci quae, voluptatem doloribus asperiores cum, accusantium hic eveniet quis temporibus fugiat excepturi nemo harum non voluptatibus aliquid voluptatum enim provident? Nam deleniti impedit animi blanditiis itaque amet mollitia, aperiam alias, magni ex sit. Harum quibusdam cum fuga vitae nobis, saepe, cupiditate inventore reiciendis, aut similique voluptatibus consequatur soluta sunt repellat. Animi deserunt, reiciendis, sed labore maiores nobis reprehenderit debitis! Sequi dignissimos nam sint dolorum deleniti magnam aliquam et, tempore alias repellat, possimus quos doloremque illum accusantium quisquam sunt, nulla obcaecati ea omnis. Eaque cumque cum error.

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

  • Accordion 1
    I would start in the open state, due to using the `is-active` state class.
  • Accordion 2
    • 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.
    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.
  • Accordion 1
    I would start in the open state, due to using the `is-active` state class.
  • Accordion 2
    • 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.
    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.

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.

  • Accordion 1
    I would start in the open state, due to using the `is-active` state class.
  • Accordion 2

    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.

    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.

  • Accordion 1
    I would start in the open state, due to using the `is-active` state class.
  • Accordion 2

    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.

    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

  • Accordion 1

    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.
    I would start in the open state, due to using the `is-active` state class.
  • Accordion 2
    • Accordion 1

      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 2
      • Accordion 1
        I would start in the open state, due to using the `is-active` state class.
      • Accordion 2

        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.

        • 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.

        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.

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.


  • 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.