diff --git a/README.md b/README.md
index 5e55db6..2baef46 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Responsive Vertical Navigation Tabs for Boostrap 5
 
-[![Build Status](https://app.travis-ci.com/tromgy/bootstrap-5-vertical-tabs.svg?branch=main)](https://app.travis-ci.com/tromgy/bootstrap-5-vertical-tabs)
+[![Build Status](https://app.travis-ci.com/tromgy/bootstrap-5-vertical-tabs.svg?branch=main)](https://app.travis-ci.com/tromgy/bootstrap-5-vertical-tabs) [![Netlify Status](https://api.netlify.com/api/v1/badges/b946eebf-a6de-4337-b6d2-de46cb9989d8/deploy-status)](https://app.netlify.com/sites/b5vtabs/deploys)
 
 A stylesheet that implements [vertically-oriented navigation tabs](https://b5vtabs.netlify.com) with Bootstrap 5.
 
@@ -8,6 +8,10 @@ A stylesheet that implements [vertically-oriented navigation tabs](https://b5vta
 
 This package is an update for Bootstrap 5 of the [previous](https://github.com/tromgy/bootstrap-4-vertical-tabs) bootstrap vertical tabs package.
 
+## Version 2 changes
+
+Now when the view becames very narrow (e.g. when viewing on a smartphone) the tabs turn into an accordion instead of nav-pill like buttons. This should provide a better mobile experience.
+
 ## Installation
 
 This package depends on Bootstrap 5, so it is assumed that you already have it installed and/or included
@@ -18,8 +22,8 @@ You can use this package either by directly embedding its pre-built (in the **di
 ```HTML
 <link
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/bootstrap-5-vertical-tabs@1.0.1/dist/b5vtabs.min.css"
-    integrity="sha256-2yiJIxF53wjxXJpWRIHMVx2h6gbxPA9qR4PZ77fmA2k="
+    href="https://cdn.jsdelivr.net/npm/bootstrap-5-vertical-tabs@2.0.0/dist/b5vtabs.min.css"
+    integrity="sha384-AsoWNxsuu73eGp2MPWHa77155fyqP9rueKOeG4t2d/AD4eyBqL20TClzfbAkrul4"
     crossorigin="anonymous"
 />
 ```
@@ -50,9 +54,17 @@ tabs turn into regular horizontal tabs:
 
 <img src="vtabs-med.png" alt="horizontal tabs at medium view width" width="400">
 
-- `$horizontal-tabs-min` - if the view is narrower than this value, horizontal tabs turn into nav-pills-like buttons:
+- `$horizontal-tabs-min` - if the view is narrower than this value, horizontal tabs turn into an accordion:
+
+<img src="vtabs-narrow.png" alt="accordion at narrow view width" width="360">
 
-<img src="vtabs-narrow.png" alt="nav-pills at narrow view width" width="220">
+**NOTE:** If you expect some long text in your tabs, wrap it in a block element with the `ellipsis` class inside the accordion `<button>`:
+
+```HTML
+<div class="ellipsis">
+  Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
+</div>
+```
 
 - `$fixed-tab-size` - specify this based on the expected text length to be displayed on the tabs.
 A (long) text that (always) fits into a vertical tab, will get ellipsis-_ed_ when it doesn't fit into
@@ -62,7 +74,7 @@ Vertical                                                                      |
 ------------------------------------------------------------------------------|---------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------
 <img src="vtabs-longword.png" alt="vertical tab with a long text" width="220">|<img src="vtabs-longword-narrow.png" alt="horizontal tab with a long text" width="300">|<img src="vtabs-longword-sideways.png" alt="vertical sideways tab with a long text" width="100">
 
-changing the value of this variable can allow you to control if and how tab captions might be truncated. The recommended values are between 4 and 12 rem.
+changing the value of this variable can allow you to control if and how tab captions might be truncated. The recommended values are between 4 and 12 rem. Once that is set, the ellipsis-_ing_ for tabs takes place automatically without the need for any additional classes.
 
 - `$left-tabs-text-align` and `$right-tabs-text-align` - these specify the text alignment for vertical left/right tabs. 
 When tabs are displayed as horizontal or nav-pills, the text is always center-aligned.
@@ -95,6 +107,15 @@ Left                                           | Right
 `sideways-tabs` (with `left-tabs`)             |              `sideways-tabs` (with `right-tabs`)
 <img src="vtabs-left-sideways.png" width="100">| <img src="vtabs-right-sideways.png" width="100">
 
-The **index.html** file in the **dist** directory illustrates all four styles. 
+There are few additional classes that you need to use:
+
+- `vtabs` -- add this class to the element that contains all vertical tabs. This establishes a scope for modifications applied to some of the Bootstrap's classes.
+
+- `ellipsis` -- add this to this to a block child of the `<button>` elements used in the accordion implementation if your text is too long to fit the button.
+
+- `tab-clickable` -- add this to the block element that renders the tab. This is necessary because
+Bootstrap 5 uses `<button type="button">` for tabs, but `<button>` doesn't work for vertical orientation, and applying `type="button"` to another element (e.g. `<div>`) will render it in Safari as an "early 21st century style" button, with gray gradient, border, etc. Therefore don't set `type="button"`, but use this class instead.
+
+Use the **index.html** file in the **dist** directory as a template for your own application.
 
 You can also see the [live demo](https://b5vtabs.netlify.com).
diff --git a/dist/b5vtabs.min.css b/dist/b5vtabs.min.css
index 03208c2..1581280 100644
--- a/dist/b5vtabs.min.css
+++ b/dist/b5vtabs.min.css
@@ -1,2 +1,2 @@
-.left-tabs.sideways-tabs,.right-tabs.sideways-tabs{margin-top:5rem;border:none;position:relative;margin-bottom:0}.left-tabs.nav-tabs,.left-tabs.sideways-tabs,.right-tabs.nav-tabs,.right-tabs.sideways-tabs{height:100%;flex-direction:column}.tab-clickable{cursor:pointer}.left-tabs.nav-tabs{border-right:1px solid #dee2e6;border-bottom:none}.left-tabs .nav-link{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-bottom-right-radius:0;border-top-right-radius:0;margin-right:-1px;text-align:left}.left-tabs .nav-link:hover{border-right:1px solid transparent}.left-tabs .nav-link.active{border-top:1px solid #dee2e6;border-right:1px solid transparent;border-bottom:1px solid #dee2e6;border-left:1px solid #dee2e6}.right-tabs.nav-tabs{border-left:1px solid #dee2e6;border-bottom:none}.right-tabs .nav-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px;text-align:right}.right-tabs .nav-link:hover{border-left:1px solid transparent}.right-tabs .nav-link.active{border-top:1px solid #dee2e6;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6;border-left:1px solid transparent}.left-tabs.sideways-tabs{border-right:none;left:-3.2rem}.sideways-tabs.left-tabs .nav-item{transform:rotate(-90deg);height:1rem;margin-bottom:calc(8rem - 1rem)}.sideways-tabs.left-tabs .nav-link{width:8rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:.25rem;border-bottom:1px solid #dee2e6}.sideways-tabs.left-tabs .nav-link:hover{border-right:1px solid #e9ecef}.sideways-tabs.left-tabs .nav-link.active{border-top:1px solid #dee2e6;border-right:1px solid #dee2e6;border-bottom:1px solid transparent;border-left:1px solid #dee2e6}.right-tabs.sideways-tabs{border-left:none;right:3.2rem}.sideways-tabs.right-tabs .nav-item{transform:rotate(90deg);height:1rem;margin-bottom:calc(8rem - 1rem)}.sideways-tabs.right-tabs .nav-link{width:8rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:.25rem;border-bottom:1px solid #dee2e6}.sideways-tabs.right-tabs .nav-link:hover{border-left:1px solid #e9ecef}.sideways-tabs.right-tabs .nav-link.active{border-top:1px solid #dee2e6;border-right:1px solid #dee2e6;border-bottom:1px solid transparent;border-left:1px solid #dee2e6}@media (min-width:26em) and (max-width:48em){.left-tabs.nav-tabs{flex-direction:row;border-right:none;border-left:none;min-width:100%;border-bottom:1px solid #dee2e6;left:auto;margin-top:auto}.left-tabs .nav-link{width:8rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:.25rem;margin-right:0;margin-bottom:-1px}.left-tabs .nav-link.nav-link:hover{border-right-color:#dee2e6;border-bottom-color:transparent}.left-tabs .nav-link.active{border-top-color:#dee2e6;border-right-color:#dee2e6;border-bottom-color:transparent;border-left-color:#dee2e6}.sideways-tabs.left-tabs .nav-item,.sideways-tabs.right-tabs .nav-item{transform:none;height:auto;width:auto;margin-bottom:0}.right-tabs.nav-tabs{flex-direction:row;border-right:none;border-left:none;min-width:100%;border-top:1px solid #dee2e6;right:auto;margin-top:auto}.right-tabs .nav-link,.sideways-tabs.right-tabs .nav-link{width:8rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top-right-radius:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;border-top-left-radius:0;margin-left:0;margin-top:-1px;border-bottom-color:transparent}.right-tabs .nav-link:hover{border-top-color:transparent;border-left-color:#dee2e6;border-bottom-color:#e9ecef}.right-tabs .nav-link.active,.sideways-tabs.right-tabs .nav-link.active{border-top-color:transparent;border-right-color:#dee2e6;border-bottom-color:#dee2e6;border-left-color:#dee2e6}}@media (max-width:26em){.left-tabs.nav-tabs{flex-direction:row;border-right:none;border-left:none;min-width:100%;border-bottom:1px solid #dee2e6;left:auto;margin-top:auto;padding-bottom:.25rem}.right-tabs.nav-tabs{flex-direction:row;border-right:none;border-left:none;min-width:100%;border-top:1px solid #dee2e6;right:auto;margin-top:auto;padding-top:.25rem}.sideways-tabs.left-tabs .nav-item,.sideways-tabs.right-tabs .nav-item{transform:none;height:auto;width:auto;margin-bottom:0}.nav-tabs .nav-link,.sideways-tabs.left-tabs .nav-link,.sideways-tabs.right-tabs .nav-link{width:8rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:.25rem;margin:.25rem;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.nav-tabs .nav-link:hover,.sideways-tabs.nav-tabs .nav-link:hover{border:1px solid #e9ecef;border-top-color:#e9ecef;border-right-color:#e9ecef;border-bottom-color:#e9ecef;border-left-color:#e9ecef}.left-tabs .nav-link.active,.right-tabs .nav-link.active,.sideways-tabs.nav-tabs .nav-link.active{border-top-color:#dee2e6;border-right-color:#dee2e6;border-bottom-color:#dee2e6;border-left-color:#dee2e6}}.tab-content{padding:1rem}
+.left-tabs.sideways-tabs,.right-tabs.sideways-tabs{margin-top:5rem;border:none;position:relative;margin-bottom:0}.left-tabs.nav-tabs,.left-tabs.sideways-tabs,.right-tabs.nav-tabs,.right-tabs.sideways-tabs{height:100%;flex-direction:column}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:.5rem}.vtabs .tab-clickable{cursor:pointer}.left-tabs.nav-tabs{border-right:1px solid #dee2e6;border-bottom:none}.left-tabs .nav-link{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-bottom-right-radius:0;border-top-right-radius:0;margin-right:-1px;text-align:left}.left-tabs .nav-link:hover{border-right:1px solid transparent}.left-tabs .nav-link.active{border-top:1px solid #dee2e6;border-right:1px solid transparent;border-bottom:1px solid #dee2e6;border-left:1px solid #dee2e6}.right-tabs.nav-tabs{border-left:1px solid #dee2e6;border-bottom:none}.right-tabs .nav-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px;text-align:right}.right-tabs .nav-link:hover{border-left:1px solid transparent}.right-tabs .nav-link.active{border-top:1px solid #dee2e6;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6;border-left:1px solid transparent}.left-tabs.sideways-tabs{border-right:none;left:-3.2rem}.sideways-tabs.left-tabs .nav-item{transform:rotate(-90deg);height:1rem;margin-bottom:calc(8rem - 1rem)}.sideways-tabs.left-tabs .nav-link{width:8rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:.25rem;border-bottom:1px solid #dee2e6}.sideways-tabs.left-tabs .nav-link:hover{border-right:1px solid #e9ecef}.sideways-tabs.left-tabs .nav-link.active{border-top:1px solid #dee2e6;border-right:1px solid #dee2e6;border-bottom:1px solid transparent;border-left:1px solid #dee2e6}.right-tabs.sideways-tabs{border-left:none;right:3.2rem}.sideways-tabs.right-tabs .nav-item{transform:rotate(90deg);height:1rem;margin-bottom:calc(8rem - 1rem)}.sideways-tabs.right-tabs .nav-link{width:8rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:.25rem;border-bottom:1px solid #dee2e6}.sideways-tabs.right-tabs .nav-link:hover{border-left:1px solid #e9ecef}.sideways-tabs.right-tabs .nav-link.active{border-top:1px solid #dee2e6;border-right:1px solid #dee2e6;border-bottom:1px solid transparent;border-left:1px solid #dee2e6}.vtabs .accordion-header{display:none}@media (max-width:767px){.left-tabs.nav-tabs{flex-direction:row;border-right:none;border-left:none;min-width:100%;border-bottom:1px solid #dee2e6;left:auto;margin-top:auto}.left-tabs .nav-link{width:8rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:.25rem;margin-right:0;margin-bottom:-1px}.left-tabs .nav-link.nav-link:hover{border-right-color:#dee2e6;border-bottom-color:transparent}.left-tabs .nav-link.active{border-top-color:#dee2e6;border-right-color:#dee2e6;border-bottom-color:transparent;border-left-color:#dee2e6}.sideways-tabs.left-tabs .nav-item,.sideways-tabs.right-tabs .nav-item{transform:none;height:auto;width:auto;margin-bottom:0}.right-tabs.nav-tabs{flex-direction:row;border-right:none;border-left:none;min-width:100%;border-top:1px solid #dee2e6;right:auto;margin-top:auto}.right-tabs .nav-link,.sideways-tabs.right-tabs .nav-link{width:8rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top-right-radius:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;border-top-left-radius:0;margin-left:0;margin-top:-1px;border-bottom-color:transparent}.right-tabs .nav-link:hover{border-top-color:transparent;border-left-color:#dee2e6;border-bottom-color:#e9ecef}.right-tabs .nav-link.active,.sideways-tabs.right-tabs .nav-link.active{border-top-color:transparent;border-right-color:#dee2e6;border-bottom-color:#dee2e6;border-left-color:#dee2e6}}@media (max-width:428px){.left-tabs.nav-tabs{display:none}.right-tabs.nav-tabs{display:none}.vtabs .tab-content>.tab-pane{display:block!important;opacity:1}.vtabs .accordion-header{display:block}.vtabs button.accordion-button:focus{border:none;outline:0;box-shadow:none}}@media (min-width:429px){.vtabs .accordion-item{border:none}.vtabs .accordion-body.collapse{display:block}}.tab-content{padding:1rem}
 /*# sourceMappingURL=b5vtabs.min.css.map */
\ No newline at end of file
diff --git a/dist/b5vtabs.min.css.map b/dist/b5vtabs.min.css.map
index 9eb93d4..2e042ac 100644
--- a/dist/b5vtabs.min.css.map
+++ b/dist/b5vtabs.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../scss/responsive-vertical-tabs.scss","../node_modules/bootstrap/scss/_variables.scss","../scss/custom-variables.scss","../index.scss"],"names":[],"mappings":"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"}
\ No newline at end of file
+{"version":3,"sources":["../scss/responsive-vertical-tabs.scss","../node_modules/bootstrap/scss/_variables.scss","../scss/custom-variables.scss","../index.scss"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/dist/favicon.ico b/dist/favicon.ico
index 0115ec9..59f61fe 100644
Binary files a/dist/favicon.ico and b/dist/favicon.ico differ
diff --git a/dist/index.html b/dist/index.html
index f919165..6e833d0 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -40,7 +40,7 @@
   </head>
 
   <body>
-    <div class="py-3 text-center">
+    <div class="p-3 text-center">
       <h1>Bootstrap Vertical Tabs</h1>
       <p class="lead">
         Responsive vertical tabs for Bootstrap 5. Available on
@@ -58,7 +58,10 @@ <h1>Bootstrap Vertical Tabs</h1>
       </p>
     </div>
 
-    <div class="container">
+    <!-- Caption -->
+    <!-- The "vtabs" class establishes a scope -->
+    <div class="container vtabs">
+      <!-- Left tabs -->
       <div class="row">
         <div class="col-md-12">
           <hr />
@@ -68,15 +71,16 @@ <h3>Left Tabs</h3>
       </div>
 
       <div class="row">
+        <!-- Tabs -->
         <div class="col-md-3">
           <ul class="nav nav-tabs left-tabs" role="tablist">
             <li class="nav-item" role="presentation">
               <div
                 id="lorem-left-tab"
                 class="nav-link tab-clickable active"
+                role="tab"
                 data-bs-toggle="tab"
                 data-bs-target="#lorem-left"
-                role="tab"
                 aria-controls="lorem-left"
                 aria-selected="true"
               >
@@ -85,27 +89,27 @@ <h3>Left Tabs</h3>
             </li>
             <li class="nav-item" role="presentation">
               <div
-                id="ipsum-left-tab"
+                id="sapien-left-tab"
                 class="nav-link tab-clickable"
-                data-bs-toggle="tab"
-                data-bs-target="#ipsum-left"
                 role="tab"
-                aria-controls="ipsum-left"
+                data-bs-toggle="tab"
+                data-bs-target="#sapien-left"
+                aria-controls="sapien-left"
                 aria-selected="false"
               >
-                Ipsum
+                Sapien
               </div>
             </li>
             <li class="nav-item" role="presentation">
               <!-- use the title attribute to show a tooltip with the full long name
-                   in case the tab is truncated-->
+                   in case the tab is trucated-->
               <div
                 id="llanfairpwllgwyngyll-left-tab"
                 class="nav-link tab-clickable"
+                role="tab"
+                title="Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch"
                 data-bs-toggle="tab"
                 data-bs-target="#llanfairpwllgwyngyll-left"
-                title="Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch"
-                role="tab"
                 aria-controls="llanfairpwllgwyngyll-left"
                 aria-selected="false"
               >
@@ -115,218 +119,323 @@ <h3>Left Tabs</h3>
           </ul>
         </div>
 
+        <!-- Tab contents -->
         <div class="col-md-9">
           <div class="container">
-            <div class="tab-content">
-              <article
-                class="tab-pane fade show active"
-                role="tabpanel"
-                aria-labelledby="lorem-left-tab"
+            <div id="accordion-left-tabs" class="tab-content accordion">
+              <!-- Individual tab panels -->
+              <!-- tab-pane must be a child of tab-content -->
+              <div
                 id="lorem-left"
-              >
-                <h1>Lorem</h1>
-                <section>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  Pulvinar mattis nunc sed blandit libero volutpat sed cras
-                  ornare. Diam vulputate ut pharetra sit amet. Orci ac auctor
-                  augue mauris augue neque. Turpis massa sed elementum tempus
-                  egestas. Faucibus ornare suspendisse sed nisi. Ipsum nunc
-                  aliquet bibendum enim facilisis gravida neque convallis a.
-                  Pretium fusce id velit ut tortor pretium viverra. Egestas sed
-                  tempus urna et pharetra. Pellentesque adipiscing commodo elit
-                  at imperdiet dui. Posuere urna nec tincidunt praesent semper.
-                  Erat velit scelerisque in dictum non consectetur a erat.
-                  Scelerisque viverra mauris in aliquam. Duis ultricies lacus
-                  sed turpis tincidunt id aliquet risus. Consectetur lorem donec
-                  massa sapien faucibus et molestie.
-                </section>
-              </article>
-              <article
-                class="tab-pane fade"
+                class="tab-pane fade show active accordion-item"
                 role="tabpanel"
-                aria-labelledby="ipsum-left-tab"
-                id="ipsum-left"
               >
-                <h1>Ipsum</h1>
-                <section>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  A lacus vestibulum sed arcu. Mi tempus imperdiet nulla
-                  malesuada pellentesque. Natoque penatibus et magnis dis
-                  parturient. Rhoncus aenean vel elit scelerisque mauris
-                  pellentesque. In hendrerit gravida rutrum quisque non tellus
-                  orci ac. Lectus magna fringilla urna porttitor rhoncus dolor.
-                  At tempor commodo ullamcorper a lacus vestibulum sed arcu.
-                  Senectus et netus et malesuada fames ac. Diam quis enim
-                  lobortis scelerisque fermentum. Praesent tristique magna sit
-                  amet purus gravida quis. Elit eget gravida cum sociis natoque
-                  penatibus et magnis. Nibh praesent tristique magna sit amet
-                  purus gravida. Cursus vitae congue mauris rhoncus. Id leo in
-                  vitae turpis massa. Blandit libero volutpat sed cras. Quam
-                  adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus
-                  urna.
-                </section>
-              </article>
-              <article
-                class="tab-pane fade"
+                <div class="accordion-header" role="tab">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    role="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#lorem-left-article"
+                    aria-expanded="true"
+                    aria-controls="lorem-left-article"
+                  >
+                    Lorem
+                  </button>
+                </div>
+                <article
+                  id="lorem-left-article"
+                  class="accordion-body accordion-collapse collapse"
+                  data-bs-parent="#accordion-left-tabs"
+                  aria-labelledby="lorem-left-tab"
+                >
+                  <h1>Lorem</h1>
+                  <section>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed
+                    cras ornare. Diam vulputate ut pharetra sit amet. Orci ac
+                    auctor augue mauris augue neque. Turpis massa sed elementum
+                    tempus egestas.
+                  </section>
+                </article>
+              </div>
+
+              <div
+                id="sapien-left"
+                class="tab-pane fade accordion-item"
                 role="tabpanel"
-                aria-labelledby="llanfairpwllgwyngyll-left-tab"
+              >
+                <div class="accordion-header" role="tab">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    role="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#sapien-left-article"
+                    aria-expanded="false"
+                    aria-controls="sapien-left-article"
+                  >
+                    Sapien
+                  </button>
+                </div>
+
+                <article
+                  id="sapien-left-article"
+                  class="accordion-body accordion-collapse collapse"
+                  data-bs-parent="#accordion-left-tabs"
+                  aria-labelledby="sapien-left-tab"
+                >
+                  <h1>Sapien</h1>
+                  <section>
+                    Sapien et ligula ullamcorper malesuada proin. Enim nulla
+                    aliquet porttitor lacus luctus accumsan. Phasellus egestas
+                    tellus rutrum tellus pellentesque eu. Morbi leo urna
+                    molestie at. Ac odio tempor orci dapibus ultrices in iaculis
+                    nunc. Consequat nisl vel pretium lectus quam id leo in
+                    vitae. Proin sagittis nisl rhoncus mattis rhoncus urna
+                    neque. Vulputate dignissim suspendisse in est ante. Luctus
+                    venenatis lectus magna fringilla urna porttitor rhoncus
+                    dolor. Quis auctor elit sed vulputate mi sit amet mauris
+                    commodo.
+                  </section>
+                </article>
+              </div>
+
+              <div
                 id="llanfairpwllgwyngyll-left"
+                class="tab-pane fade accordion-item"
+                role="tabpanel"
               >
-                <h1>
-                  Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
-                </h1>
-                <section>
-                  <p><small>From Wikipedia, the free encyclopedia</small></p>
-                </section>
-                <section>
-                  <p>
+                <div class="accordion-header" role="tab">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    role="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#llanfairpwllgwyngyll-left-article"
+                    aria-expanded="false"
+                    aria-controls="llanfairpwllgwyngyll-left-article"
+                  >
+                    <!-- Use the ellipsis class for long text in accordion buttons -->
+                    <div class="ellipsis">
+                      Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
+                    </div>
+                  </button>
+                </div>
+                <article
+                  id="llanfairpwllgwyngyll-left-article"
+                  class="accordion-body accordion-collapse collapse"
+                  data-bs-parent="#accordion-left-tabs"
+                  aria-labelledby="llanfairpwllgwyngyll-left-tab"
+                >
+                  <h1>
                     Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
-                    (pronounced
-                    [ˌɬanvair­pʊɬˌɡwɨ̞ŋɡɨ̞ɬ­ɡɔˌɡɛrə­ˌχwərn­ˌdrɔbʊɬ­ˌɬan­təˌsɪljɔ­ˌɡɔɡɔ­ˈɡoːχ]
-                    in Welsh), official short form name Llanfairpwllgwyngyll
-                    (pronounced [ɬanˌvair puɬˈɡwɨ̞nɡɨ̞ɬ]), also spelled Llanfair
-                    Pwllgwyngyll, is a large village and local government
-                    community on the island of Anglesey in Wales. It is situated
-                    on the Menai Strait next to the Britannia Bridge and across
-                    the strait from Bangor. While the official short form name
-                    is used in official contexts, both the full name and
-                    shortened (Llanfairpwll or Llanfair PG) forms of the place
-                    name are used in various contexts.
-                  </p>
-                  <p>
-                    <a
-                      href="https://en.wikipedia.org/wiki/Llanfairpwllgwyngyll"
-                      target="_blank"
-                      title="Open Wikipedia article in a new tab."
-                      >Full article &gt;</a
-                    >
-                  </p>
-                </section>
-              </article>
+                  </h1>
+                  <section>
+                    <p>
+                      <small>From Wikipedia, the free encyclopedia</small>
+                    </p>
+                  </section>
+                  <section>
+                    <p>
+                      Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
+                      (pronounced
+                      [ˌɬanvair­pʊɬˌɡwɨ̞ŋɡɨ̞ɬ­ɡɔˌɡɛrə­ˌχwərn­ˌdrɔbʊɬ­ˌɬan­təˌsɪljɔ­ˌɡɔɡɔ­ˈɡoːχ]
+                      in Welsh), official short form name Llanfairpwllgwyngyll
+                      (pronounced [ɬanˌvair puɬˈɡwɨ̞nɡɨ̞ɬ]), also spelled Llanfair
+                      Pwllgwyngyll, is a large village and local government
+                      community on the island of Anglesey in Wales. It is
+                      situated on the Menai Strait next to the Britannia Bridge
+                      and across the strait from Bangor. While the official
+                      short form name is used in official contexts, both the
+                      full name and shortened (Llanfairpwll or Llanfair PG)
+                      forms of the place name are used in various contexts.
+                    </p>
+                    <p>
+                      <a
+                        href="https://en.wikipedia.org/wiki/Llanfairpwllgwyngyll"
+                        target="_blank"
+                        title="Open Wikipedia article in a new tab."
+                        >Full article &gt;</a
+                      >
+                    </p>
+                  </section>
+                </article>
+              </div>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="row">
-        <div class="container">
-          <hr />
-        </div>
-      </div>
-
+      <!-- Right tabs -->
       <div class="row">
         <div class="col-md-12">
+          <hr />
           <h3>Right Tabs</h3>
           <hr />
         </div>
       </div>
 
       <div class="row">
+        <!-- Tab contents -->
         <div class="col-md-9">
           <div class="container">
-            <div class="tab-content">
-              <article
-                class="tab-pane fade show active"
-                role="tabpanel"
-                aria-labelledby="lorem-right-tab"
+            <div id="accordion-right-tabs" class="tab-content accordion">
+              <!-- Individual tab panels -->
+              <!-- tab-pane must be a child of tab-content -->
+              <div
                 id="lorem-right"
-              >
-                <h1>Lorem</h1>
-                <section>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  Pulvinar mattis nunc sed blandit libero volutpat sed cras
-                  ornare. Diam vulputate ut pharetra sit amet. Orci ac auctor
-                  augue mauris augue neque. Turpis massa sed elementum tempus
-                  egestas. Faucibus ornare suspendisse sed nisi. Ipsum nunc
-                  aliquet bibendum enim facilisis gravida neque convallis a.
-                  Pretium fusce id velit ut tortor pretium viverra. Egestas sed
-                  tempus urna et pharetra. Pellentesque adipiscing commodo elit
-                  at imperdiet dui. Posuere urna nec tincidunt praesent semper.
-                  Erat velit scelerisque in dictum non consectetur a erat.
-                  Scelerisque viverra mauris in aliquam. Duis ultricies lacus
-                  sed turpis tincidunt id aliquet risus. Consectetur lorem donec
-                  massa sapien faucibus et molestie.
-                </section>
-              </article>
-              <article
-                class="tab-pane fade"
+                class="tab-pane fade show active accordion-item"
                 role="tabpanel"
-                aria-labelledby="ipsum-right-tab"
-                id="ipsum-right"
               >
-                <h1>Ipsum</h1>
-                <section>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  A lacus vestibulum sed arcu. Mi tempus imperdiet nulla
-                  malesuada pellentesque. Natoque penatibus et magnis dis
-                  parturient. Rhoncus aenean vel elit scelerisque mauris
-                  pellentesque. In hendrerit gravida rutrum quisque non tellus
-                  orci ac. Lectus magna fringilla urna porttitor rhoncus dolor.
-                  At tempor commodo ullamcorper a lacus vestibulum sed arcu.
-                  Senectus et netus et malesuada fames ac. Diam quis enim
-                  lobortis scelerisque fermentum. Praesent tristique magna sit
-                  amet purus gravida quis. Elit eget gravida cum sociis natoque
-                  penatibus et magnis. Nibh praesent tristique magna sit amet
-                  purus gravida. Cursus vitae congue mauris rhoncus. Id leo in
-                  vitae turpis massa. Blandit libero volutpat sed cras. Quam
-                  adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus
-                  urna.
-                </section>
-              </article>
-              <article
-                class="tab-pane fade"
+                <div class="accordion-header" role="tab">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    role="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#lorem-right-article"
+                    aria-expanded="true"
+                    aria-controls="lorem-right-article"
+                  >
+                    Lorem
+                  </button>
+                </div>
+                <article
+                  id="lorem-right-article"
+                  class="accordion-body accordion-collapse collapse"
+                  data-bs-parent="#accordion-right-tabs"
+                  aria-labelledby="lorem-right-tab"
+                >
+                  <h1>Lorem</h1>
+                  <section>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed
+                    cras ornare. Diam vulputate ut pharetra sit amet. Orci ac
+                    auctor augue mauris augue neque. Turpis massa sed elementum
+                    tempus egestas.
+                  </section>
+                </article>
+              </div>
+
+              <div
+                id="sapien-right"
+                class="tab-pane fade accordion-item"
                 role="tabpanel"
-                aria-labelledby="llanfairpwllgwyngyll-right-tab"
+              >
+                <div class="accordion-header" role="tab">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    role="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#sapien-right-article"
+                    aria-expanded="false"
+                    aria-controls="sapien-right-article"
+                  >
+                    Sapien
+                  </button>
+                </div>
+
+                <article
+                  id="sapien-right-article"
+                  class="accordion-body accordion-collapse collapse"
+                  data-bs-parent="#accordion-right-tabs"
+                  aria-labelledby="sapien-right-tab"
+                >
+                  <h1>Sapien</h1>
+                  <section>
+                    Sapien et ligula ullamcorper malesuada proin. Enim nulla
+                    aliquet porttitor lacus luctus accumsan. Phasellus egestas
+                    tellus rutrum tellus pellentesque eu. Morbi leo urna
+                    molestie at. Ac odio tempor orci dapibus ultrices in iaculis
+                    nunc. Consequat nisl vel pretium lectus quam id leo in
+                    vitae. Proin sagittis nisl rhoncus mattis rhoncus urna
+                    neque. Vulputate dignissim suspendisse in est ante. Luctus
+                    venenatis lectus magna fringilla urna porttitor rhoncus
+                    dolor. Quis auctor elit sed vulputate mi sit amet mauris
+                    commodo.
+                  </section>
+                </article>
+              </div>
+
+              <div
                 id="llanfairpwllgwyngyll-right"
+                class="tab-pane fade accordion-item"
+                role="tabpanel"
               >
-                <h1>
-                  Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
-                </h1>
-                <section>
-                  <p><small>From Wikipedia, the free encyclopedia</small></p>
-                </section>
-                <section>
-                  <p>
+                <div class="accordion-header" role="tab">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    role="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#llanfairpwllgwyngyll-right-article"
+                    aria-expanded="false"
+                    aria-controls="llanfairpwllgwyngyll-right-article"
+                  >
+                    <!-- Use the ellipsis class for long text in accordion buttons -->
+                    <div class="ellipsis">
+                      Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
+                    </div>
+                  </button>
+                </div>
+                <article
+                  id="llanfairpwllgwyngyll-right-article"
+                  class="accordion-body accordion-collapse collapse"
+                  data-bs-parent="#accordion-right-tabs"
+                  aria-labelledby="llanfairpwllgwyngyll-right-tab"
+                >
+                  <h1>
                     Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
-                    (pronounced
-                    [ˌɬanvair­pʊɬˌɡwɨ̞ŋɡɨ̞ɬ­ɡɔˌɡɛrə­ˌχwərn­ˌdrɔbʊɬ­ˌɬan­təˌsɪljɔ­ˌɡɔɡɔ­ˈɡoːχ]
-                    in Welsh), official short form name Llanfairpwllgwyngyll
-                    (pronounced [ɬanˌvair puɬˈɡwɨ̞nɡɨ̞ɬ]), also spelled Llanfair
-                    Pwllgwyngyll, is a large village and local government
-                    community on the island of Anglesey in Wales. It is situated
-                    on the Menai Strait next to the Britannia Bridge and across
-                    the strait from Bangor. While the official short form name
-                    is used in official contexts, both the full name and
-                    shortened (Llanfairpwll or Llanfair PG) forms of the place
-                    name are used in various contexts.
-                  </p>
-                  <p>
-                    <a
-                      href="https://en.wikipedia.org/wiki/Llanfairpwllgwyngyll"
-                      target="_blank"
-                      title="Open Wikipedia article in a new tab."
-                      >Full article &gt;</a
-                    >
-                  </p>
-                </section>
-              </article>
+                  </h1>
+                  <section>
+                    <p>
+                      <small>From Wikipedia, the free encyclopedia</small>
+                    </p>
+                  </section>
+                  <section>
+                    <p>
+                      Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
+                      (pronounced
+                      [ˌɬanvair­pʊɬˌɡwɨ̞ŋɡɨ̞ɬ­ɡɔˌɡɛrə­ˌχwərn­ˌdrɔbʊɬ­ˌɬan­təˌsɪljɔ­ˌɡɔɡɔ­ˈɡoːχ]
+                      in Welsh), official short form name Llanfairpwllgwyngyll
+                      (pronounced [ɬanˌvair puɬˈɡwɨ̞nɡɨ̞ɬ]), also spelled Llanfair
+                      Pwllgwyngyll, is a large village and local government
+                      community on the island of Anglesey in Wales. It is
+                      situated on the Menai Strait next to the Britannia Bridge
+                      and across the strait from Bangor. While the official
+                      short form name is used in official contexts, both the
+                      full name and shortened (Llanfairpwll or Llanfair PG)
+                      forms of the place name are used in various contexts.
+                    </p>
+                    <p>
+                      <a
+                        href="https://en.wikipedia.org/wiki/Llanfairpwllgwyngyll"
+                        target="_blank"
+                        title="Open Wikipedia article in a new tab."
+                        >Full article &gt;</a
+                      >
+                    </p>
+                  </section>
+                </article>
+              </div>
             </div>
           </div>
         </div>
 
+        <!-- Tabs -->
         <div class="col-md-3">
           <ul class="nav nav-tabs right-tabs" role="tablist">
             <li class="nav-item" role="presentation">
               <div
                 id="lorem-right-tab"
                 class="nav-link tab-clickable active"
+                role="tab"
                 data-bs-toggle="tab"
                 data-bs-target="#lorem-right"
-                role="tab"
                 aria-controls="lorem-right"
                 aria-selected="true"
               >
@@ -335,27 +444,27 @@ <h1>
             </li>
             <li class="nav-item" role="presentation">
               <div
-                id="ipsum-right-tab"
+                id="sapien-right-tab"
                 class="nav-link tab-clickable"
-                data-bs-toggle="tab"
-                data-bs-target="#ipsum-right"
                 role="tab"
-                aria-controls="ipsum-right"
+                data-bs-toggle="tab"
+                data-bs-target="#sapien-right"
+                aria-controls="sapien-right"
                 aria-selected="false"
               >
-                Ipsum
+                Sapien
               </div>
             </li>
             <li class="nav-item" role="presentation">
               <!-- use the title attribute to show a tooltip with the full long name
-                   in case the tab is truncated-->
+                   in case the tab is trucated-->
               <div
                 id="llanfairpwllgwyngyll-right-tab"
                 class="nav-link tab-clickable"
+                role="tab"
+                title="Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch"
                 data-bs-toggle="tab"
                 data-bs-target="#llanfairpwllgwyngyll-right"
-                title="Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch"
-                role="tab"
                 aria-controls="llanfairpwllgwyngyll-right"
                 aria-selected="false"
               >
@@ -366,58 +475,57 @@ <h1>
         </div>
       </div>
 
-      <div class="row">
-        <div class="container">
-          <hr />
-        </div>
-      </div>
-
+      <!-- Left sideways tabs -->
       <div class="row">
         <div class="col-md-12">
-          <h3>Sideways Left Tabs</h3>
+          <hr />
+          <h3>Left Sideways Tabs</h3>
           <hr />
         </div>
       </div>
 
       <div class="row">
+        <!-- Tabs -->
         <div class="col-md-1">
           <ul class="nav nav-tabs left-tabs sideways-tabs" role="tablist">
             <li class="nav-item" role="presentation">
               <div
-                id="lorem-sleft-tab"
+                id="lorem-sideways-left-tab"
                 class="nav-link tab-clickable active"
-                data-bs-toggle="tab"
-                data-bs-target="#lorem-sleft"
                 role="tab"
-                aria-controls="lorem-sleft"
-                aria-select="true"
+                data-bs-toggle="tab"
+                data-bs-target="#lorem-sideways-left"
+                aria-controls="lorem-sideways-left"
+                aria-selected="true"
               >
                 Lorem
               </div>
             </li>
             <li class="nav-item" role="presentation">
               <div
-                id="ipsum-sleft-tab"
+                id="sapien-sideways-left-tab"
                 class="nav-link tab-clickable"
-                data-bs-toggle="tab"
-                data-bs-target="#ipsum-sleft"
                 role="tab"
-                aria-controls="ipsum-sleft"
+                data-bs-toggle="tab"
+                data-bs-target="#sapien-sideways-left"
+                aria-controls="sapien-sideways-left"
+                aria-selected="false"
               >
-                Ipsum
+                Sapien
               </div>
             </li>
             <li class="nav-item" role="presentation">
               <!-- use the title attribute to show a tooltip with the full long name
-                   in case the tab is truncated-->
+                         in case the tab is trucated-->
               <div
-                id="llanfairpwllgwyngyll-sleft-tab"
+                id="llanfairpwllgwyngyll-sideways-left-tab"
                 class="nav-link tab-clickable"
-                data-bs-toggle="tab"
-                data-bs-target="#llanfairpwllgwyngyll-sleft"
-                title="Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch"
                 role="tab"
-                aria-control="llanfairpwllgwyngyll-sleft"
+                title="Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch"
+                data-bs-toggle="tab"
+                data-bs-target="#llanfairpwllgwyngyll-sideways-left"
+                aria-controls="llanfairpwllgwyngyll-sideways-left"
+                aria-selected="false"
               >
                 Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
               </div>
@@ -425,219 +533,330 @@ <h3>Sideways Left Tabs</h3>
           </ul>
         </div>
 
+        <!-- Tab contents -->
         <div class="col-md-11">
           <div class="container">
-            <div class="tab-content">
-              <article
-                class="tab-pane fade show active"
+            <div
+              id="accordion-sideways-left-tabs"
+              class="tab-content accordion"
+            >
+              <!-- Individual tab panels -->
+              <!-- tab-pane must be a child of tab-content -->
+              <div
+                id="lorem-sideways-left"
+                class="tab-pane fade show active accordion-item"
                 role="tabpanel"
-                aria-labelledby="lorem-sleft-tab"
-                id="lorem-sleft"
               >
-                <h1>Lorem</h1>
-                <section>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  Pulvinar mattis nunc sed blandit libero volutpat sed cras
-                  ornare. Diam vulputate ut pharetra sit amet. Orci ac auctor
-                  augue mauris augue neque. Turpis massa sed elementum tempus
-                  egestas. Faucibus ornare suspendisse sed nisi. Ipsum nunc
-                  aliquet bibendum enim facilisis gravida neque convallis a.
-                  Pretium fusce id velit ut tortor pretium viverra. Egestas sed
-                  tempus urna et pharetra. Pellentesque adipiscing commodo elit
-                  at imperdiet dui. Posuere urna nec tincidunt praesent semper.
-                  Erat velit scelerisque in dictum non consectetur a erat.
-                  Scelerisque viverra mauris in aliquam. Duis ultricies lacus
-                  sed turpis tincidunt id aliquet risus. Consectetur lorem donec
-                  massa sapien faucibus et molestie.
-                </section>
-              </article>
-              <article
-                class="tab-pane fade"
+                <div class="accordion-header" role="tab">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    role="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#lorem-sideways-left-article"
+                    aria-expanded="true"
+                    aria-controls="lorem-sideways-left-article"
+                  >
+                    Lorem
+                  </button>
+                </div>
+                <article
+                  id="lorem-sideways-left-article"
+                  class="accordion-body accordion-collapse collapse"
+                  data-bs-parent="#accordion-sideways-left-tabs"
+                  aria-labelledby="lorem-sideways-left-tab"
+                >
+                  <h1>Lorem</h1>
+                  <section>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed
+                    cras ornare. Diam vulputate ut pharetra sit amet. Orci ac
+                    auctor augue mauris augue neque. Turpis massa sed elementum
+                    tempus egestas.
+                  </section>
+                </article>
+              </div>
+
+              <div
+                id="sapien-sideways-left"
+                class="tab-pane fade accordion-item"
                 role="tabpanel"
-                aria-labelledby="ipsum-sleft-tab"
-                id="ipsum-sleft"
               >
-                <h1>Ipsum</h1>
-                <section>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  A lacus vestibulum sed arcu. Mi tempus imperdiet nulla
-                  malesuada pellentesque. Natoque penatibus et magnis dis
-                  parturient. Rhoncus aenean vel elit scelerisque mauris
-                  pellentesque. In hendrerit gravida rutrum quisque non tellus
-                  orci ac. Lectus magna fringilla urna porttitor rhoncus dolor.
-                  At tempor commodo ullamcorper a lacus vestibulum sed arcu.
-                  Senectus et netus et malesuada fames ac. Diam quis enim
-                  lobortis scelerisque fermentum. Praesent tristique magna sit
-                  amet purus gravida quis. Elit eget gravida cum sociis natoque
-                  penatibus et magnis. Nibh praesent tristique magna sit amet
-                  purus gravida. Cursus vitae congue mauris rhoncus. Id leo in
-                  vitae turpis massa. Blandit libero volutpat sed cras. Quam
-                  adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus
-                  urna.
-                </section>
-              </article>
-              <article
-                class="tab-pane fade"
+                <div class="accordion-header" role="tab">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    role="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#sapien-sideways-left-article"
+                    aria-expanded="false"
+                    aria-controls="sapien-sideways-left-article"
+                  >
+                    Sapien
+                  </button>
+                </div>
+
+                <article
+                  id="sapien-sideways-left-article"
+                  class="accordion-body accordion-collapse collapse"
+                  data-bs-parent="#accordion-sideways-left-tabs"
+                  aria-labelledby="sapien-sideways-left-tab"
+                >
+                  <h1>Sapien</h1>
+                  <section>
+                    Sapien et ligula ullamcorper malesuada proin. Enim nulla
+                    aliquet porttitor lacus luctus accumsan. Phasellus egestas
+                    tellus rutrum tellus pellentesque eu. Morbi leo urna
+                    molestie at. Ac odio tempor orci dapibus ultrices in iaculis
+                    nunc. Consequat nisl vel pretium lectus quam id leo in
+                    vitae. Proin sagittis nisl rhoncus mattis rhoncus urna
+                    neque. Vulputate dignissim suspendisse in est ante. Luctus
+                    venenatis lectus magna fringilla urna porttitor rhoncus
+                    dolor. Quis auctor elit sed vulputate mi sit amet mauris
+                    commodo.
+                  </section>
+                </article>
+              </div>
+
+              <div
+                id="llanfairpwllgwyngyll-sideways-left"
+                class="tab-pane fade accordion-item"
                 role="tabpanel"
-                aria-labelledby="llanfairpwllgwyngyll-sleft-tab"
-                id="llanfairpwllgwyngyll-sleft"
               >
-                <h1>
-                  Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
-                </h1>
-                <section>
-                  <p><small>From Wikipedia, the free encyclopedia</small></p>
-                </section>
-                <section>
-                  <p>
+                <div class="accordion-header" role="tab">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    role="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#llanfairpwllgwyngyll-sideways-left-article"
+                    aria-expanded="false"
+                    aria-controls="llanfairpwllgwyngyll-sideways-left-article"
+                  >
+                    <!-- Use the ellipsis class for long text in accordion buttons -->
+                    <div class="ellipsis">
+                      Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
+                    </div>
+                  </button>
+                </div>
+                <article
+                  id="llanfairpwllgwyngyll-sideways-left-article"
+                  class="accordion-body accordion-collapse collapse"
+                  data-bs-parent="#accordion-sideways-left-tabs"
+                  aria-labelledby="llanfairpwllgwyngyll-sideways-left-tab"
+                >
+                  <h1>
                     Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
-                    (pronounced
-                    [ˌɬanvair­pʊɬˌɡwɨ̞ŋɡɨ̞ɬ­ɡɔˌɡɛrə­ˌχwərn­ˌdrɔbʊɬ­ˌɬan­təˌsɪljɔ­ˌɡɔɡɔ­ˈɡoːχ]
-                    in Welsh), official short form name Llanfairpwllgwyngyll
-                    (pronounced [ɬanˌvair puɬˈɡwɨ̞nɡɨ̞ɬ]), also spelled Llanfair
-                    Pwllgwyngyll, is a large village and local government
-                    community on the island of Anglesey in Wales. It is situated
-                    on the Menai Strait next to the Britannia Bridge and across
-                    the strait from Bangor. While the official short form name
-                    is used in official contexts, both the full name and
-                    shortened (Llanfairpwll or Llanfair PG) forms of the place
-                    name are used in various contexts.
-                  </p>
-                  <p>
-                    <a
-                      href="https://en.wikipedia.org/wiki/Llanfairpwllgwyngyll"
-                      target="_blank"
-                      title="Open Wikipedia article in a new tab."
-                      >Full article &gt;</a
-                    >
-                  </p>
-                </section>
-              </article>
+                  </h1>
+                  <section>
+                    <p>
+                      <small>From Wikipedia, the free encyclopedia</small>
+                    </p>
+                  </section>
+                  <section>
+                    <p>
+                      Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
+                      (pronounced
+                      [ˌɬanvair­pʊɬˌɡwɨ̞ŋɡɨ̞ɬ­ɡɔˌɡɛrə­ˌχwərn­ˌdrɔbʊɬ­ˌɬan­təˌsɪljɔ­ˌɡɔɡɔ­ˈɡoːχ]
+                      in Welsh), official short form name Llanfairpwllgwyngyll
+                      (pronounced [ɬanˌvair puɬˈɡwɨ̞nɡɨ̞ɬ]), also spelled Llanfair
+                      Pwllgwyngyll, is a large village and local government
+                      community on the island of Anglesey in Wales. It is
+                      situated on the Menai Strait next to the Britannia Bridge
+                      and across the strait from Bangor. While the official
+                      short form name is used in official contexts, both the
+                      full name and shortened (Llanfairpwll or Llanfair PG)
+                      forms of the place name are used in various contexts.
+                    </p>
+                    <p>
+                      <a
+                        href="https://en.wikipedia.org/wiki/Llanfairpwllgwyngyll"
+                        target="_blank"
+                        title="Open Wikipedia article in a new tab."
+                        >Full article &gt;</a
+                      >
+                    </p>
+                  </section>
+                </article>
+              </div>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="row">
-        <div class="container">
-          <hr />
-        </div>
-      </div>
-
+      <!-- Sideways right tabs -->
       <div class="row">
         <div class="col-md-12">
-          <h3>Sideways Right Tabs</h3>
+          <hr />
+          <h3>Right Sideways Tabs</h3>
           <hr />
         </div>
       </div>
 
       <div class="row">
+        <!-- Tab contents -->
         <div class="col-md-11">
           <div class="container">
-            <div class="tab-content">
-              <article
-                class="tab-pane fade show active"
+            <div
+              id="accordion-sideways-right-tabs"
+              class="tab-content accordion"
+            >
+              <!-- Individual tab panels -->
+              <!-- tab-pane must be a child of tab-content -->
+              <div
+                id="lorem-sideways-right"
+                class="tab-pane fade show active accordion-item"
                 role="tabpanel"
-                aria-labelledby="lorem-sright-tab"
-                id="lorem-sright"
               >
-                <h1>Lorem</h1>
-                <section>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  Pulvinar mattis nunc sed blandit libero volutpat sed cras
-                  ornare. Diam vulputate ut pharetra sit amet. Orci ac auctor
-                  augue mauris augue neque. Turpis massa sed elementum tempus
-                  egestas. Faucibus ornare suspendisse sed nisi. Ipsum nunc
-                  aliquet bibendum enim facilisis gravida neque convallis a.
-                  Pretium fusce id velit ut tortor pretium viverra. Egestas sed
-                  tempus urna et pharetra. Pellentesque adipiscing commodo elit
-                  at imperdiet dui. Posuere urna nec tincidunt praesent semper.
-                  Erat velit scelerisque in dictum non consectetur a erat.
-                  Scelerisque viverra mauris in aliquam. Duis ultricies lacus
-                  sed turpis tincidunt id aliquet risus. Consectetur lorem donec
-                  massa sapien faucibus et molestie.
-                </section>
-              </article>
-              <article
-                class="tab-pane fade"
+                <div class="accordion-header" role="tab">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    role="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#lorem-sideways-right-article"
+                    aria-expanded="true"
+                    aria-controls="lorem-sideways-right-article"
+                  >
+                    Lorem
+                  </button>
+                </div>
+                <article
+                  id="lorem-sideways-right-article"
+                  class="accordion-body accordion-collapse collapse"
+                  data-bs-parent="#accordion-sideways-right-tabs"
+                  aria-labelledby="lorem-sideways-right-tab"
+                >
+                  <h1>Lorem</h1>
+                  <section>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed
+                    cras ornare. Diam vulputate ut pharetra sit amet. Orci ac
+                    auctor augue mauris augue neque. Turpis massa sed elementum
+                    tempus egestas.
+                  </section>
+                </article>
+              </div>
+
+              <div
+                id="sapien-sideways-right"
+                class="tab-pane fade accordion-item"
                 role="tabpanel"
-                aria-labelledby="ipsum-sright-tab"
-                id="ipsum-sright"
               >
-                <h1>Ipsum</h1>
-                <section>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  A lacus vestibulum sed arcu. Mi tempus imperdiet nulla
-                  malesuada pellentesque. Natoque penatibus et magnis dis
-                  parturient. Rhoncus aenean vel elit scelerisque mauris
-                  pellentesque. In hendrerit gravida rutrum quisque non tellus
-                  orci ac. Lectus magna fringilla urna porttitor rhoncus dolor.
-                  At tempor commodo ullamcorper a lacus vestibulum sed arcu.
-                  Senectus et netus et malesuada fames ac. Diam quis enim
-                  lobortis scelerisque fermentum. Praesent tristique magna sit
-                  amet purus gravida quis. Elit eget gravida cum sociis natoque
-                  penatibus et magnis. Nibh praesent tristique magna sit amet
-                  purus gravida. Cursus vitae congue mauris rhoncus. Id leo in
-                  vitae turpis massa. Blandit libero volutpat sed cras. Quam
-                  adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus
-                  urna.
-                </section>
-              </article>
-              <article
-                class="tab-pane fade"
+                <div class="accordion-header" role="tab">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    role="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#sapien-sideways-right-article"
+                    aria-expanded="false"
+                    aria-controls="sapien-sideways-right-article"
+                  >
+                    Sapien
+                  </button>
+                </div>
+
+                <article
+                  id="sapien-sideways-right-article"
+                  class="accordion-body accordion-collapse collapse"
+                  data-bs-parent="#accordion-sideways-right-tabs"
+                  aria-labelledby="sapien-sideways-right-tab"
+                >
+                  <h1>Sapien</h1>
+                  <section>
+                    Sapien et ligula ullamcorper malesuada proin. Enim nulla
+                    aliquet porttitor lacus luctus accumsan. Phasellus egestas
+                    tellus rutrum tellus pellentesque eu. Morbi leo urna
+                    molestie at. Ac odio tempor orci dapibus ultrices in iaculis
+                    nunc. Consequat nisl vel pretium lectus quam id leo in
+                    vitae. Proin sagittis nisl rhoncus mattis rhoncus urna
+                    neque. Vulputate dignissim suspendisse in est ante. Luctus
+                    venenatis lectus magna fringilla urna porttitor rhoncus
+                    dolor. Quis auctor elit sed vulputate mi sit amet mauris
+                    commodo.
+                  </section>
+                </article>
+              </div>
+
+              <div
+                id="llanfairpwllgwyngyll-sideways-right"
+                class="tab-pane fade accordion-item"
                 role="tabpanel"
-                aria-labelledby="llanfairpwllgwyngyll-sright-tab"
-                id="llanfairpwllgwyngyll-sright"
               >
-                <h1>
-                  Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
-                </h1>
-                <section>
-                  <p><small>From Wikipedia, the free encyclopedia</small></p>
-                </section>
-                <section>
-                  <p>
+                <div class="accordion-header" role="tab">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    role="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#llanfairpwllgwyngyll-sideways-right-article"
+                    aria-expanded="false"
+                    aria-controls="llanfairpwllgwyngyll-sideways-right-article"
+                  >
+                    <!-- Use the ellipsis class for long text in accordion buttons -->
+                    <div class="ellipsis">
+                      Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
+                    </div>
+                  </button>
+                </div>
+                <article
+                  id="llanfairpwllgwyngyll-sideways-right-article"
+                  class="accordion-body accordion-collapse collapse"
+                  data-bs-parent="#accordion-sideways-right-tabs"
+                  aria-labelledby="llanfairpwllgwyngyll-sideways-right-tab"
+                >
+                  <h1>
                     Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
-                    (pronounced
-                    [ˌɬanvair­pʊɬˌɡwɨ̞ŋɡɨ̞ɬ­ɡɔˌɡɛrə­ˌχwərn­ˌdrɔbʊɬ­ˌɬan­təˌsɪljɔ­ˌɡɔɡɔ­ˈɡoːχ]
-                    in Welsh), official short form name Llanfairpwllgwyngyll
-                    (pronounced [ɬanˌvair puɬˈɡwɨ̞nɡɨ̞ɬ]), also spelled Llanfair
-                    Pwllgwyngyll, is a large village and local government
-                    community on the island of Anglesey in Wales. It is situated
-                    on the Menai Strait next to the Britannia Bridge and across
-                    the strait from Bangor. While the official short form name
-                    is used in official contexts, both the full name and
-                    shortened (Llanfairpwll or Llanfair PG) forms of the place
-                    name are used in various contexts.
-                  </p>
-                  <p>
-                    <a
-                      href="https://en.wikipedia.org/wiki/Llanfairpwllgwyngyll"
-                      target="_blank"
-                      title="Open Wikipedia article in a new tab."
-                      >Full article &gt;</a
-                    >
-                  </p>
-                </section>
-              </article>
+                  </h1>
+                  <section>
+                    <p>
+                      <small>From Wikipedia, the free encyclopedia</small>
+                    </p>
+                  </section>
+                  <section>
+                    <p>
+                      Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
+                      (pronounced
+                      [ˌɬanvair­pʊɬˌɡwɨ̞ŋɡɨ̞ɬ­ɡɔˌɡɛrə­ˌχwərn­ˌdrɔbʊɬ­ˌɬan­təˌsɪljɔ­ˌɡɔɡɔ­ˈɡoːχ]
+                      in Welsh), official short form name Llanfairpwllgwyngyll
+                      (pronounced [ɬanˌvair puɬˈɡwɨ̞nɡɨ̞ɬ]), also spelled Llanfair
+                      Pwllgwyngyll, is a large village and local government
+                      community on the island of Anglesey in Wales. It is
+                      situated on the Menai Strait next to the Britannia Bridge
+                      and across the strait from Bangor. While the official
+                      short form name is used in official contexts, both the
+                      full name and shortened (Llanfairpwll or Llanfair PG)
+                      forms of the place name are used in various contexts.
+                    </p>
+                    <p>
+                      <a
+                        href="https://en.wikipedia.org/wiki/Llanfairpwllgwyngyll"
+                        target="_blank"
+                        title="Open Wikipedia article in a new tab."
+                        >Full article &gt;</a
+                      >
+                    </p>
+                  </section>
+                </article>
+              </div>
             </div>
           </div>
         </div>
 
+        <!-- Tabs -->
         <div class="col-md-1">
-          <ul class="nav sideways-tabs nav-tabs right-tabs" role="tablist">
+          <ul class="nav nav-tabs right-tabs sideways-tabs" role="tablist">
             <li class="nav-item" role="presentation">
               <div
-                id="lorem-sright-tab"
+                id="lorem-sideways-right-tab"
                 class="nav-link tab-clickable active"
-                data-bs-toggle="tab"
-                data-bs-target="#lorem-sright"
                 role="tab"
-                aria-controls="lorem-sright"
+                data-bs-toggle="tab"
+                data-bs-target="#lorem-sideways-right"
+                aria-controls="lorem-sideways-right"
                 aria-selected="true"
               >
                 Lorem
@@ -645,28 +864,28 @@ <h1>
             </li>
             <li class="nav-item" role="presentation">
               <div
-                id="ipsum-sright-tab"
+                id="sapien-sideways-right-tab"
                 class="nav-link tab-clickable"
-                data-bs-toggle="tab"
-                data-bs-target="#ipsum-sright"
                 role="tab"
-                aria-controls="ipsum-sright"
+                data-bs-toggle="tab"
+                data-bs-target="#sapien-sideways-right"
+                aria-controls="sapien-sideways-right"
                 aria-selected="false"
               >
-                Ipsum
+                Sapien
               </div>
             </li>
             <li class="nav-item" role="presentation">
               <!-- use the title attribute to show a tooltip with the full long name
-                   in case the tab is truncated-->
+                   in case the tab is trucated-->
               <div
-                id="llanfairpwllgwyngyll-sright-tab"
+                id="llanfairpwllgwyngyll-sideways-right-tab"
                 class="nav-link tab-clickable"
-                data-bs-toggle="tab"
-                data-bs-target="#llanfairpwllgwyngyll-sright"
-                title="Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch"
                 role="tab"
-                aria-controls="llanfairpwllgwyngyll-sright"
+                title="Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch"
+                data-bs-toggle="tab"
+                data-bs-target="#llanfairpwllgwyngyll-sideways-right"
+                aria-controls="llanfairpwllgwyngyll-sideways-right"
                 aria-selected="false"
               >
                 Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch
@@ -686,6 +905,7 @@ <h1>
         </footer>
       </div>
     </div>
+
     <!-- Bootstrap JS -->
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
diff --git a/dist/logo192.png b/dist/logo192.png
index 1a8f6ae..9342adc 100644
Binary files a/dist/logo192.png and b/dist/logo192.png differ
diff --git a/dist/sha384.txt b/dist/sha384.txt
new file mode 100644
index 0000000..d26426c
--- /dev/null
+++ b/dist/sha384.txt
@@ -0,0 +1 @@
+AsoWNxsuu73eGp2MPWHa77155fyqP9rueKOeG4t2d/AD4eyBqL20TClzfbAkrul4
\ No newline at end of file
diff --git a/graphics/vtabs-simple.svg b/graphics/vtabs-simple.svg
index d9f5ff0..cf8c6ab 100644
--- a/graphics/vtabs-simple.svg
+++ b/graphics/vtabs-simple.svg
@@ -1,4 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
-  <path style="fill: none; stroke-linejoin: round; stroke-linecap: round; stroke: rgb(53, 53, 53); stroke-width: 16px;" d="M 318.318 39.057 L 318.318 146.257 M 34 146.257 L 318.318 146.257 M 318.318 236.042 L 34 236.042 C 25.163 236.042 18 228.879 18 220.042 L 18 162.257 C 18 153.42 25.163 146.257 34 146.257 M 318.318 236.042 L 318.318 455.091"/>
+  <rect style="fill: rgb(255, 255, 255);" width="500" height="500" rx="100" ry="100"/>
+  <path style="fill: none; stroke-linejoin: round; stroke-linecap: round; stroke: rgb(59, 58, 58); stroke-width: 13px;" d="M 343.765 236.042 L 140.442 236.042 C 134.122 236.042 129 228.879 129 220.042 L 129 162.257 C 129 153.42 134.122 146.257 140.442 146.257 M 343.765 39.057 L 343.765 146.257 M 140.442 146.257 L 343.765 146.257 M 343.765 236.042 L 343.765 455.091"/>
+  <path style="fill: none; stroke-linejoin: round; stroke-width: 6px; stroke: rgb(141, 139, 139);" d="M 336.743 440.466 L 136.281 440.466 C 130.051 440.466 125 433.303 125 424.466 L 125 366.681 C 125 357.844 130.051 350.681 136.281 350.681 M 136.281 350.681 L 336.743 350.681"/>
 </svg>
\ No newline at end of file
diff --git a/graphics/vtabs.svg b/graphics/vtabs.svg
index 2542525..10162e0 100644
--- a/graphics/vtabs.svg
+++ b/graphics/vtabs.svg
@@ -1,20 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
-  <rect style="fill: rgb(255, 255, 255);" x="0" y="0" width="500" height="500" rx="100" ry="100"/>
-  <line style="stroke-width: 21px; stroke-linecap: round; stroke-dashoffset: 10px; stroke-dasharray: 10, 50, 20, 40; stroke: rgb(10, 88, 202);" x1="23.059" y1="82.2" x2="296" y2="83.64"/>
-  <line style="stroke: rgb(0, 0, 0); stroke-width: 21px; stroke-linecap: round; stroke-dashoffset: 10px; stroke-dasharray: 5, 50, 30, 40;" x1="18" y1="190.4" x2="265" y2="191.9"/>
-  <line style="stroke-width: 21px; stroke-linecap: round; stroke-dashoffset: 10px; stroke-dasharray: 10, 50, 20, 40, 11, 60; stroke: rgb(10, 88, 202);" x1="2.059" y1="298.7" x2="265" y2="300.159"/>
-  <line style="stroke-width: 21px; stroke-linecap: round; stroke-dashoffset: 10px; stroke-dasharray: 10, 60, 10, 40, 20, 50; stroke: rgb(10, 88, 202);" x1="3.059" y1="406.9" x2="281" y2="408.419"/>
-  <path style="fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-width: 6px; stroke: rgb(161, 159, 159);" d="M 318.318 236.042 L 34 236.042 C 25.163 236.042 18 228.879 18 220.042 L 18 162.257 C 18 153.42 25.163 146.257 34 146.257 M 318.318 39.057 L 318.318 146.257 M 34 146.257 L 318.318 146.257 M 318.318 236.042 L 318.318 455.091"/>
-  <line style="stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-dasharray: 10, 30, 5, 30, 15, 30; stroke-width: 18px;" x1="347.784" y1="72.2" x2="479.656" y2="72.2"/>
-  <line style="stroke: rgb(0, 0, 0); stroke-width: 11px; stroke-linecap: round; stroke-dasharray: 25, 40, 5;" x1="347.784" y1="114.822" x2="479.656" y2="114.822"/>
-  <line style="stroke: rgb(0, 0, 0); stroke-width: 11px; stroke-linecap: round; stroke-dasharray: 15, 40, 10, 40;" x1="347.784" y1="147.444" x2="479.656" y2="147.444"/>
-  <line style="stroke: rgb(0, 0, 0); stroke-width: 11px; stroke-linecap: round; stroke-dasharray: 5, 34;" x1="347.784" y1="180.066" x2="479.656" y2="180.066"/>
-  <line style="stroke: rgb(0, 0, 0); stroke-width: 11px; stroke-linecap: round; stroke-dasharray: 5, 34, 15, 20;" x1="347.784" y1="212.688" x2="479.656" y2="212.688"/>
-  <line style="stroke: rgb(0, 0, 0); stroke-width: 11px; stroke-linecap: round; stroke-dasharray: 5, 34, 5, 30;" x1="347.784" y1="245.31" x2="479.656" y2="245.31"/>
-  <line style="stroke: rgb(0, 0, 0); stroke-width: 11px; stroke-linecap: round; stroke-dasharray: 5, 34, 33, 43;" x1="347.784" y1="277.931" x2="479.656" y2="277.931"/>
-  <line style="stroke: rgb(0, 0, 0); stroke-width: 11px; stroke-linecap: round; stroke-dasharray: 5, 34, 2, 43;" x1="347.784" y1="310.553" x2="479.656" y2="310.553"/>
-  <line style="stroke: rgb(0, 0, 0); stroke-width: 11px; stroke-linecap: round; stroke-dasharray: 15, 30, 22, 22, 2;" x1="347.784" y1="343.175" x2="479.656" y2="343.175"/>
-  <line style="stroke: rgb(0, 0, 0); stroke-width: 11px; stroke-linecap: round; stroke-dasharray: 5, 34, 43, 23;" x1="347.784" y1="375.797" x2="479.656" y2="375.797"/>
-  <line style="stroke: rgb(0, 0, 0); stroke-width: 11px; stroke-linecap: round; stroke-dasharray: 5, 34, 34, 40;" x1="347.784" y1="408.419" x2="479.656" y2="408.419"/>
+  <rect style="fill: rgb(255, 255, 255);" width="500" height="500" rx="100" ry="100"/>
+  <rect style="fill: rgb(10, 88, 202); fill-opacity: 0.25;" x="154.819" y="79.527" width="126.588" height="16" rx="10" ry="10"/>
+  <rect style="fill: rgb(10, 88, 202); fill-opacity: 0.25;" x="154.819" y="283.11" width="80" height="16" rx="10" ry="10"/>
+  <rect style="fill: rgb(10, 88, 202); fill-opacity: 0.25;" x="154.819" y="384.902" width="80" height="16" rx="10" ry="10"/>
+  <g transform="matrix(1, 0, 0, 0.79972, 111, 36.125431)">
+    <rect style="fill: rgb(0, 14, 34); fill-opacity: 0.25;" x="43.819" y="181.555" width="57.539" height="20" rx="10" ry="10"/>
+    <rect style="fill: rgb(0, 14, 34); fill-opacity: 0.25;" x="116.745" y="181.562" width="29.098" height="20" rx="10" ry="10"/>
+  </g>
+  <path style="fill: none; stroke-linejoin: round; stroke-linecap: round; stroke: rgb(59, 58, 58); stroke-width: 13px;" d="M 343.765 236.042 L 140.442 236.042 C 134.122 236.042 129 228.879 129 220.042 L 129 162.257 C 129 153.42 134.122 146.257 140.442 146.257 M 343.765 39.057 L 343.765 146.257 M 140.442 146.257 L 343.765 146.257 M 343.765 236.042 L 343.765 455.091"/>
+  <path style="fill: none; stroke-linejoin: round; stroke: rgb(226, 226, 226); stroke-width: 6px;" d="M 336.743 440.466 L 136.281 440.466 C 130.051 440.466 125 433.303 125 424.466 L 125 366.681 C 125 357.844 130.051 350.681 136.281 350.681 M 136.281 350.681 L 336.743 350.681"/>
+  <path d="M 275.454 451.389 L 270.087 456.756 L 255.767 442.621 L 252.546 454.223 L 240.572 421.594 L 272.682 433.987 L 261.083 437.203 Z" style="" transform="matrix(0.898182, 0.439623, -0.439623, 0.898182, 219.341792, -68.712714)"/>
 </svg>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 14aac16..500b633 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,12 @@
 {
   "name": "bootstrap-5-vertical-tabs",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "1.0.0",
+      "name": "bootstrap-5-vertical-tabs",
+      "version": "1.0.2",
       "license": "MIT",
       "dependencies": {
         "bootstrap": "^5.0.1",
diff --git a/package.json b/package.json
index 091cb17..d7d6948 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,16 @@
 {
   "name": "bootstrap-5-vertical-tabs",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "Responsive vertical tabs navigation component for Bootstrap 5",
-  "main": "index.html",
+  "main": "./dist/index.html",
+  "jsdelivr": "./dist/b5vtabs.min.css",
   "scripts": {
     "build-dev": "npm run css-compile && npm run css-minify",
-    "build": "npm ci && npm run css-compile && npm run css-minify",
+    "build": "npm ci && npm run css-compile && npm run css-minify && npm run sri-gen",
     "css-compile": "sass index.scss --no-error-css --load-path=node_modules build/b5vtabs.css",
     "css-minify": "cd build && cleancss -o ../dist/b5vtabs.min.css b5vtabs.css --source-map",
-    "test": "npm run build && npm run build-dev"
+    "test": "npm run build && npm run build-dev",
+    "sri-gen": "openssl dgst -sha384 -binary dist/b5vtabs.min.css | openssl base64 -A > dist/sha384.txt"
   },
   "keywords": [
     "bootstrap",
diff --git a/scss/custom-variables.scss b/scss/custom-variables.scss
index c06dda7..1e863e6 100644
--- a/scss/custom-variables.scss
+++ b/scss/custom-variables.scss
@@ -13,14 +13,14 @@
  *
  */
 
-// When the view is narrower than this navpill-like buttons are used,
+// When the view is narrower than this tabs turn into an accordion,
 // otherwise horizontal tabs are used up until $vertical-tabs-min width
-$horizontal-tabs-min: 26em;
+$horizontal-tabs-min: 428px; // iPhone 13 Pro Max (as a proxy for "largest smartphone")
 
 // When the view is wider than this, vertical tabs are used
-$vertical-tabs-min: 48em;
+$vertical-tabs-min: 767px; // Need it to be just 1px less than 768px Bootstrap column breakpoint
 
-// Set this depending on the longest caption text of the tabs
+// Set this depending on the longest expected caption text of the tabs
 // If the text is still longer than that, it will be truncated with ellipsis
 // NOTE: there are practical limits on this value, the "good" values
 // seem to be somewhere beetween 4 and 12rem;
diff --git a/scss/responsive-vertical-tabs.scss b/scss/responsive-vertical-tabs.scss
index 9091c1b..d80f1a1 100644
--- a/scss/responsive-vertical-tabs.scss
+++ b/scss/responsive-vertical-tabs.scss
@@ -13,8 +13,8 @@
  *
  */
 
-@import "bootstrap/scss/_functions";
-@import "bootstrap/scss/_variables";
+@import 'bootstrap/scss/_functions';
+@import 'bootstrap/scss/_variables';
 
 // Magic numbers
 $magic-horizontal-value: 3.2rem;
@@ -35,13 +35,17 @@ $sideways-tabs-height: 1rem;
   flex-direction: column;
 }
 
+@mixin limit-text-length {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 // Mixins (can be reused inside @media scope)
 @mixin fixed-tab($size: $fixed-tab-size) {
   width: $size;
   text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  @include limit-text-length;
 }
 
 // Used in horizontal tab configuration (narrow views)
@@ -52,13 +56,18 @@ $sideways-tabs-height: 1rem;
   min-width: 100%;
 }
 
+.ellipsis {
+  @include limit-text-length;
+  padding-right: 0.5rem;
+}
+
 // Workaround for Safari issue :/
 // Bootstrap 5 uses <button type="button"> for tabs, but
 // <button> doesn't work for vertical orientation, and applying type="button"
-// to another element (e.g. <div>) will render it in Safari as "early 21st century style" button,
+// to another element (e.g. <div>) will render it in Safari as an "early 21st century style" button,
 // with gray gradient, border, etc. So we don't set type="button", but then we need
 // to change the cursor to indicate that the tab is "clickable"
-.tab-clickable {
+.vtabs .tab-clickable {
   cursor: pointer;
 }
 
@@ -186,8 +195,13 @@ $sideways-tabs-height: 1rem;
   border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
 }
 
+// Do not display accordion when in tab mode (wide view)
+.vtabs .accordion-header {
+  display: none;
+}
+
 // Use horizontal tabs when the view is too narrow for the vertical tabs on the side
-@media (min-width: $horizontal-tabs-min) and (max-width: $vertical-tabs-min) {
+@media (max-width: $vertical-tabs-min) {
   .left-tabs.nav-tabs {
     @include flex-tabs-h;
     border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
@@ -260,59 +274,40 @@ $sideways-tabs-height: 1rem;
   }
 }
 
-// Turn tabs into nav-pill-like buttons when the view is very narrow
+// Turn tabs into an accordion when the view is very narrow...
 @media (max-width: $horizontal-tabs-min) {
   .left-tabs.nav-tabs {
-    @include flex-tabs-h;
-    border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
-    left: auto;
-    margin-top: auto;
-    padding-bottom: $nav-tabs-border-radius;
+    display: none;
   }
 
   .right-tabs.nav-tabs {
-    @include flex-tabs-h;
-    border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
-    right: auto;
-    margin-top: auto;
-    padding-top: $nav-tabs-border-radius;
+    display: none;
   }
 
-  .sideways-tabs.left-tabs .nav-item,
-  .sideways-tabs.right-tabs .nav-item {
-    transform: none;
-    height: auto;
-    width: auto;
-    margin-bottom: 0;
+  // This is to ensure that all tabs are visible at once (in an accordion)
+  .vtabs .tab-content > .tab-pane {
+    display: block !important;
+    opacity: 1;
   }
 
-  .sideways-tabs.left-tabs .nav-link,
-  .sideways-tabs.right-tabs .nav-link,
-  .nav-tabs .nav-link {
-    @include fixed-tab;
-    border-radius: $nav-tabs-border-radius;
-    margin: $nav-tabs-border-radius;
-    border-top-color: transparent;
-    border-right-color: transparent;
-    border-bottom-color: transparent;
-    border-left-color: transparent;
+  .vtabs .accordion-header {
+    display: block;
   }
 
-  .sideways-tabs.nav-tabs .nav-link:hover,
-  .nav-tabs .nav-link:hover {
-    border: $nav-tabs-border-width solid $gray-200;
-    border-top-color: $gray-200;
-    border-right-color: $gray-200;
-    border-bottom-color: $gray-200;
-    border-left-color: $gray-200;
+  .vtabs button.accordion-button:focus {
+    border: none;
+    outline: none;
+    box-shadow: none;
   }
+}
 
-  .sideways-tabs.nav-tabs .nav-link.active,
-  .left-tabs .nav-link.active,
-  .right-tabs .nav-link.active {
-    border-top-color: $nav-tabs-border-color;
-    border-right-color: $nav-tabs-border-color;
-    border-bottom-color: $nav-tabs-border-color;
-    border-left-color: $nav-tabs-border-color;
+// ...and disable any accordion-ness when it is wider
+@media (min-width: $horizontal-tabs-min + 1) {
+  .vtabs .accordion-item {
+    border: none; // Display border only when it is in accordion mode (narrow view)
+  }
+
+  .vtabs .accordion-body.collapse {
+    display: block; // Always display (tab) content in wide view even if it was collapsed in accordion
   }
 }
diff --git a/vtabs-narrow.png b/vtabs-narrow.png
index 8baab4f..61ccef0 100644
Binary files a/vtabs-narrow.png and b/vtabs-narrow.png differ