All geek questions in one place

Bootstrap 4 Accordion Tab. How?

I googled and found how to make the Bootstrap 3 tab for the accordion in a responsive Bootstrap 3 tab to accordion , but I use Bootstrap 4 and don’t know how to convert it to the Bootstrap 4 tab for the accordion. Please help me.

Thanks!

+13
source share
4 answers

As stated in the comments, the original answer was written for Bootsrap 4 Beta 2 . The released version of Bootstrap 4 requires two markup changes / CSS. Hence the update.

In Bootstrap 4, you can achieve this functionality with the following markup.
(Since the built-in fragment viewer sometimes mixes up different things when using css @media requests, I also created Codepen .)

Compared to BS 4 Beta 2, there are the following two necessary changes:

  • First, the .tab-pane tabs changes: before .tab-pane controlled the .fade class, but in the released version it is .fade:not(.show) , which has a higher priority. So in order to override transparency, you need to change .tab-pane to .tab-content >.tab-pane in css.
  • Secondly, the processing of folding groups has changed. Previously, it was a toggle button that required the data-parent attribute. However, starting with the release version, data-parent should go to the folding element.

Updated code for Bootstrap 4.1.3 looks like this:

HTML

 <div class="container"> <ul id="tabs" class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a> </li> <li class="nav-item"> <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a> </li> <li class="nav-item"> <a id="tab-C" href="#pane-C" class="nav-link" data-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"> <!-- Note: 'data-parent' removed from here --> <a data-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A"> Collapsible Group Item A </a> </h5> </div> <!-- Note: New place of 'data-parent' --> <div id="collapse-A" class="collapse show" data-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-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-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 class="collapsed" data-toggle="collapse" href="#collapse-C" aria-expanded="false" aria-controls="collapse-C"> Collapsible Group Item C </a> </h5> </div> <div id="collapse-C" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-C"> <div class="card-body"> [Tab content C] </div> </div> </div> </div> </div>

CSS

 .nav-tabs { display:none; } @media(min-width:768px) { .nav-tabs { display: flex; } .card { border: none; } .card .card-header { display:none; } .card .collapse{ display:block; } } @media(max-width:767px){ /* * Changed selector to '.tab-content > .tab-pane' to override '.fade:not(.show)' * In BS4 Beta '.tab-pane were rendered hidden by just '.fade' */ .tab-content > .tab-pane { { display: block; opacity: 1; } }

Original answer for Bootstrap 4 Beta 2 :
Codepen

 .nav-tabs { display:none; } @media(min-width:768px) { .nav-tabs { display: flex; } .card { border: none; } .card .card-header { display:none; } .card .collapse{ display:block; } } @media(max-width:767px){ .tab-pane { display: block !important; opacity: 1; } } 
 <div class="container"> <ul id="tabs" class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a> </li> <li class="nav-item"> <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a> </li> <li class="nav-item"> <a id="tab-C" href="#pane-C" class="nav-link" data-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-toggle="collapse" href="#collapse-A" data-parent="#content" aria-expanded="true" aria-controls="collapse-A"> Collapsible Group Item A </a> </h5> </div> <div id="collapse-A" class="collapse show" 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-toggle="collapse" href="#collapse-B" data-parent="#content" aria-expanded="false" aria-controls="collapse-B"> Collapsible Group Item B </a> </h5> </div> <div id="collapse-B" class="collapse" 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 class="collapsed" data-toggle="collapse" href="#collapse-C" data-parent="#content" aria-expanded="false" aria-controls="collapse-C"> Collapsible Group Item C </a> </h5> </div> <div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C"> <div class="card-body"> [Tab content C] </div> </div> </div> </div> </div> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
+23
source

Current versions of Bootstrap 4 suggest that data-parent should be placed in collapse containers.

To add group management as an accordion to a foldable area, add the data data-parent = "# selector" attribute.

 <div class="container"> <ul id="tabs" class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a> </li> <li class="nav-item"> <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a> </li> <li class="nav-item"> <a id="tab-C" href="#pane-C" class="nav-link" data-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-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" role="tabpanel" data-parent="#content" aria-labelledby="heading-A"> <div class="card-body">[Tab content A]</div> </div> </div> <div id="pane-B" class="card tab-pane fade show" role="tabpanel" aria-labelledby="tab-B"> <div class="card-header" role="tab" id="heading-B"> <h5 class="mb-0"><a class="collapsed" data-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" role="tabpanel" data-parent="#content" aria-labelledby="heading-B"> <div class="card-body">[Tab content B]</div> </div> </div> <div id="pane-C" class="card tab-pane fade show" role="tabpanel" aria-labelledby="tab-C"> <div class="card-header" role="tab" id="heading-C"> <h5 class="mb-0"><a class="collapsed" data-toggle="collapse" href="#collapse-C" aria-expanded="false" aria-controls="collapse-C"> Collapsible Group Item C</a></h5> </div> <div id="collapse-C" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-C"> <div class="card-body">[Tab content C]</div> </div> </div> </div>

https://getbootstrap.com/docs/4.0/components/collapse/#via-data-attributes

Demo

+2
source

I made this boot tab 4 for the accordion using jquery .... Hope it works :)

 function tabToAccordion(){ var navTab = $(".nav-tabs"), tabContent = $(".tab-content"); // hiding the navtabs navTab.hide(); // appending each link to respective tab-pane navTab.find("li").each(function(){ var destination = $($(this).find(".nav-link").attr("href")); var anchor = $(this).find(".nav-link"); // removing unused attributes and adding tabContent-toggler class anchor.removeAttr("data-toggle role aria-controls aria-selected").addClass("tabContent-toggler").insertBefore(destination); }); var tabToggler = $('.tabContent-toggler'), tabPane = tabContent.find(".tab-pane"), // get all classes in tab pane for further usage and replace tab-pane with empty data nonActiveTabPane = tabContent.find(".tab-pane:not(.active)").attr("class"); tabPaneClass = tabPane.attr('class'); tabPaneClass = tabPaneClass.replace(nonActiveTabPane,""); tabToggler.click(function(e){ // get the destination of clicked element var destination = $($(this).attr("href")); // if not this element then remove active class $(this).parent().find(tabToggler).not($(this)).removeClass("active"); //if not clicked destination then remove all other class except tab-pane $(this).parent().find('.tab-pane').removeClass(tabPaneClass); // now toggle active class $(this).toggleClass("active"); // also toggle all other class in tab-pane destination.toggleClass(tabPaneClass); // if this element dont have active class then remove all other class from tab-pane if(!$(this).hasClass("active")){ destination.removeClass(tabPaneClass); } // first element of nested tab-pane should be active if(destination.has(tabToggler)){ var tabTogglerFirstChild = destination.find(".tabContent-toggler:first-child"), tabTogglerFirstDestination = $(tabTogglerFirstChild.attr("href")); tabTogglerFirstChild.addClass("active"); tabTogglerFirstDestination.addClass(tabPaneClass); } // preventing default behaviour of element e.preventDefault(); }); } // check if device is mobile and if so only run the function if(/Mobi/.test(navigator.userAgent)){ tabToAccordion(); }
+1
source

I have the error 'tabPaneClass not defined' in this script and BS4

0
source

Source: https://habr.com/ru/post/1274104/

More articles:


All Articles