Bootstrap Accordion inside Tabs
Question
I have for sake of example created two tabs (Tab1, Tab2). Under each tab there are accordions. The behavior of accordion inside both tabs is not exactly the same. Under tab1 if I expand an accordion all other accordions collapse automatically, however, for tab2 if i expand an accordion it will not collapse other accordions which is expanded. I need the behavior as in Tab1.
Below is minimal code in HTML and CSS:
ul { margin: 0; padding: 0; list-style: none; } .nav li { border-bottom: 1px solid #eee; } .nav li a { font-size: 14px; } #accordionMenu { max-width: 750px; } .panel-body { padding: 0; } .panel-group .panel+.panel { margin-top: 0; border-top: 0; } .panel-group .panel { border-radius: 0; } .panel-default>.panel-heading { color: #333; background-color: #fff; border-color: #e4e5e7; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .panel-default>.panel-heading a { display: block; padding: 10px 15px; text-decoration: none; font-size: 14px; } .panel-default>.panel-heading a:after { content: ""; position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: right; transition: transform .25s linear; -webkit-transition: -webkit-transform .25s linear; } .panel-default>.panel-heading a[aria-expanded="true"] { background-color: #eee; } .panel-default>.panel-heading a[aria-expanded="true"]:after { content: "\\e113"; } .panel-default>.panel-heading a[aria-expanded="false"]:after { content: "\\e114"; }
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/leaflet.css"> <link rel="stylesheet" type="text/css" href="css/leaflet-logo.css"> <script src="https://cdn.jsdelivr.net/npm/vega@4.4.0"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc12"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@3.29.1"></script> <script type="text/javascript" src="js/uikit.js"></script> <script type="text/javascript" src="js/leaflet.js"></script> <script type="text/javascript" src='js/leaflet-logo.js'></script> <script type="text/javascript" src='js/fespoint.js'></script> <script type="text/javascript" src="js/fes.js"></script> <script type="text/javascript" src='js/d3.v5.min.js'></script> <script type="text/javascript" src='data/data3.js'></script> <script type="text/javascript" src='js/color.js'></script> </head> <body> <div id="exTab2" style="padding: 40px;"> <ul class="nav nav-tabs"> <li class="active"> <a href="#1" data-toggle="tab">Tab1</a> </li> <li><a href="#2" data-toggle="tab">Tab2</a> </li> </ul> <div class="tab-content "> <div class="tab-pane active" id="1"> <div> <div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> MenuA </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <ul class="nav"> <li><a href="#">ItemA</a></li> <li><a href="#">Item B</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> menu B </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <ul class="nav"> <li><a href="#" id="A1a">ItemA1 </a></li> <li><a href="#" id="A1b">Item B2</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Menu C </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <ul class="nav"> <li><a href="#">B1 </a></li> <li><a href="#">B2 </a></li> <li><a href="#">B3 </a></li> <li><a href="#">B4 </a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingsix"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapsesix" aria-expanded="false" aria-controls="collapsesix"> Menu D </a> </h4> </div> <div id="collapsesix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingsix"> <div class="panel-body"> <ul class="nav"> <li><a href="#">A11</a></li> <li><a href="#">A12</a></li> <li><a href="#">A13</a></li> <li><a href="#">A2</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="2"> <div> <div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading1"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Menu 0 </a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading2"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Menu 1 </a> </h4> </div> <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading3"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Menu 2 </a> </h4> </div> <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading4"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse4" aria-expanded="false" aria-controls="collapse4"> Menu 3 </a> </h4> </div> <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
1 answers
solution1
1 ACCPTED 2019-03-20 14:09:08
Both accordions are using the same id="accordionMenu" , make sure each of them have different ids and that this ids are reflected correctly on the data-parent attribute of their respective items
ul { margin: 0; padding: 0; list-style: none; } .nav li { border-bottom: 1px solid #eee; } .nav li a { font-size: 14px; } #accordionMenu { max-width: 750px; } .panel-body { padding: 0; } .panel-group .panel+.panel { margin-top: 0; border-top: 0; } .panel-group .panel { border-radius: 0; } .panel-default>.panel-heading { color: #333; background-color: #fff; border-color: #e4e5e7; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .panel-default>.panel-heading a { display: block; padding: 10px 15px; text-decoration: none; font-size: 14px; } .panel-default>.panel-heading a:after { content: ""; position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: right; transition: transform .25s linear; -webkit-transition: -webkit-transform .25s linear; } .panel-default>.panel-heading a[aria-expanded="true"] { background-color: #eee; } .panel-default>.panel-heading a[aria-expanded="true"]:after { content: "\\e113"; } .panel-default>.panel-heading a[aria-expanded="false"]:after { content: "\\e114"; }
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/leaflet.css"> <link rel="stylesheet" type="text/css" href="css/leaflet-logo.css"> <script src="https://cdn.jsdelivr.net/npm/vega@4.4.0"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc12"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@3.29.1"></script> <script type="text/javascript" src="js/uikit.js"></script> <script type="text/javascript" src="js/leaflet.js"></script> <script type="text/javascript" src='js/leaflet-logo.js'></script> <script type="text/javascript" src='js/fespoint.js'></script> <script type="text/javascript" src="js/fes.js"></script> <script type="text/javascript" src='js/d3.v5.min.js'></script> <script type="text/javascript" src='data/data3.js'></script> <script type="text/javascript" src='js/color.js'></script> </head> <body> <div id="exTab2" style="padding: 40px;"> <ul class="nav nav-tabs"> <li class="active"> <a href="#1" data-toggle="tab">Tab1</a> </li> <li><a href="#2" data-toggle="tab">Tab2</a> </li> </ul> <div class="tab-content "> <div class="tab-pane active" id="1"> <div> <div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> MenuA </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <ul class="nav"> <li><a href="#">ItemA</a></li> <li><a href="#">Item B</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> menu B </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <ul class="nav"> <li><a href="#" id="A1a">ItemA1 </a></li> <li><a href="#" id="A1b">Item B2</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Menu C </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <ul class="nav"> <li><a href="#">B1 </a></li> <li><a href="#">B2 </a></li> <li><a href="#">B3 </a></li> <li><a href="#">B4 </a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingsix"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapsesix" aria-expanded="false" aria-controls="collapsesix"> Menu D </a> </h4> </div> <div id="collapsesix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingsix"> <div class="panel-body"> <ul class="nav"> <li><a href="#">A11</a></li> <li><a href="#">A12</a></li> <li><a href="#">A13</a></li> <li><a href="#">A2</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="2"> <div> <div class="panel-group" id="accordionMenu2" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading1"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordionMenu2" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Menu 0 </a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading2"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu2" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Menu 1 </a> </h4> </div> <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading3"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu2" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Menu 2 </a> </h4> </div> <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading4"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu2" href="#collapse4" aria-expanded="false" aria-controls="collapse4"> Menu 3 </a> </h4> </div> <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4"> <div class="panel-body"> <ul class="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap Accordion Tabs Not Collapsing
Bootstrap Accordion Tabs Not Opening
Bootstrap 4 getting nav tabs to collapse with card accordion
How to open all Bootstrap accordion tabs at once
bootstrap accordion not working with table inside it
Accordion inside Bootstrap navbar dropdown
Bootstrap tabs not working inside modal
Bootstrap tabs inside Owl carousel
tabs inside a dropdown -twitter bootstrap
Twitter Bootstrap Dropdown with Tabs inside
Related Tags