A simple way to create responsive tabs with Bootstrap 5. Tabs functionality is replaced by Accordion on small screens.
View sample on JsFiiddle
Last active
January 29, 2024 00:26
-
-
Save howbizarre/e9e5cc2aa301c1d3ed7f5bf5e82cb1bf to your computer and use it in GitHub Desktop.
A simple way to create responsive tabs with Bootstrap 5. Tabs functionality is replaced by Accordion on small screens.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Bootstrap 5 responsive Tabs with Accordion</title> | |
| <meta name="description" | |
| content="Simple way to create responsive tabs in Bootstrap 5. Tabs functionality are replaced width Accordion on small screens." /> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" | |
| integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" /> | |
| <style> | |
| .responsive-tabs { | |
| padding: 1rem; | |
| } | |
| .responsive-tabs .nav-tabs { | |
| display: none; | |
| } | |
| @media (min-width: 768px) { | |
| .responsive-tabs .nav-tabs { | |
| display: flex; | |
| } | |
| .responsive-tabs .card { | |
| border: none; | |
| } | |
| .responsive-tabs .card .card-header { | |
| display: none; | |
| } | |
| .responsive-tabs .card .collapse { | |
| display: block; | |
| } | |
| } | |
| @media (max-width: 767px) { | |
| .responsive-tabs .tab-pane { | |
| display: block !important; | |
| opacity: 1; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container responsive-tabs"> | |
| <ul class="nav nav-tabs" role="tablist"> | |
| <li class="nav-item"> | |
| <a id="tab-A" href="#pane-A" class="nav-link active" data-bs-toggle="tab" role="tab">–A–</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a id="tab-B" href="#pane-B" class="nav-link" data-bs-toggle="tab" role="tab">–B–</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a id="tab-C" href="#pane-C" class="nav-link" data-bs-toggle="tab" role="tab">–C–</a> | |
| </li> | |
| </ul> | |
| <div id="content" class="tab-content" role="tablist"> | |
| <div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A"> | |
| <div class="card-header" role="tab" id="heading-A"> | |
| <h5 class="mb-0"> | |
| <a data-bs-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A"> | |
| Collapsible Group Item A | |
| </a> | |
| </h5> | |
| </div> | |
| <div id="collapse-A" class="collapse show" data-bs-parent="#content" role="tabpanel" | |
| aria-labelledby="heading-A"> | |
| <div class="card-body">[Tab content A]</div> | |
| </div> | |
| </div> | |
| <div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B"> | |
| <div class="card-header" role="tab" id="heading-B"> | |
| <h5 class="mb-0"> | |
| <a class="collapsed" data-bs-toggle="collapse" href="#collapse-B" aria-expanded="false" | |
| aria-controls="collapse-B"> | |
| Collapsible Group Item B | |
| </a> | |
| </h5> | |
| </div> | |
| <div id="collapse-B" class="collapse" data-bs-parent="#content" role="tabpanel" | |
| aria-labelledby="heading-B"> | |
| <div class="card-body">[Tab content B]</div> | |
| </div> | |
| </div> | |
| <div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C"> | |
| <div class="card-header" role="tab" id="heading-C"> | |
| <h5 class="mb-0"> | |
| <a data-bs-toggle="collapse" href="#collapse-C" aria-expanded="true" aria-controls="collapse-C"> | |
| Collapsible Group Item C | |
| </a> | |
| </h5> | |
| </div> | |
| <div id="collapse-C" class="collapse" data-bs-parent="#content" role="tabpanel" | |
| aria-labelledby="heading-C"> | |
| <div class="card-body">[Tab content C]</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" | |
| integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" | |
| crossorigin="anonymous"></script> | |
| </body> | |
| </html> |
Thank you for providing this, it works perfectly.
Thanks !!
Thanks for this, works really well. Does anyone know how to apply a "active" state to the accordion view (card header). Can't quite figure this one out. I wan to be able to add a + and - (open close) icon, which I can add in the card header element, but i need a trigger to be able to change it from a plus to a minus (and vice versa).
Simple, work perfectly, no JS involve, pure SCSS solution — Great Work — Thank You!
Hi this looks great! but i can´t collapse cards inside "card-body" divs ,sadly they appear always "collapse show"
nice
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This worked great - thank you!