Close Accordion element when another element opened
Question
I am working on a Accordion. It's going great, however, when I open a link then open a 2nd link, the original link doesn't close. How do I resolve this?
Demo: https://jsfiddle.net/g8xxh1Lp/
/* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'); @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 0px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="container-fluid" id="singleacord"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel with-nav-tabs panel-default"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"> <a data-toggle="tab" href="#tab1">General</a> </li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <div> <ul class="red_bullets"> <li> <a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapse11">Test 1</a> </li> </ul> <div class="panel-collapse collapse" id="collapse11"> <div class="panel-body"> <p>Test 1 Textx</p> </div> </div> <ul class="red_bullets"> <li> <a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapse22">Test 2</a> </li> </ul> <div class="panel-collapse collapse" id="collapse22"> <div class="panel-body"> <p>Test 2 Text</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
2 answers
solution1
3 ACCPTED 2016-11-07 13:53:22
Just give an id - accordion to your div and class - panel - group which is the parent of ul.red_bullets and wrap red_bullets within one more div with class - panel panel-default . That's how the grouping or structure should be. Check out the below updated snippet
/* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'); @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 0px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="container-fluid" id="singleacord"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel with-nav-tabs panel-default"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"> <a data-toggle="tab" href="#tab1">General</a> </li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <div class="panel-group" id="accordion"> <!--This here--> <div class="panel panel-default"><!--and this--> <ul class="red_bullets"> <li> <a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapse11">Test 1</a> </li> </ul> <div class="panel-collapse collapse" id="collapse11"> <div class="panel-body"> <p>Test 1 Textx</p> </div> </div> <ul class="red_bullets"> <li> <a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapse22">Test 2</a> </li> </ul> <div class="panel-collapse collapse" id="collapse22"> <div class="panel-body"> <p>Test 2 Text</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
solution2
2 2016-11-07 13:47:14
You can use the bootstrap accordion like this.
<! doctype HTML> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel-group" id="accordion" 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="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </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="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </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="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </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
How to close element when click is made everywhere except on opened element?
FAQ accordion hide clicked element automatically when another element is clicked
How to hide/close other elements when new element is being opened?
close the opened accordion menu when second accordion menu is clicked, bootstrap
JS - How can I make an accordion item close when another has been clicked on and opened?
How to close another element when another element is clicked
Dropdown close when another is opened
Close opened element and show the new clicked one
Onclick should close other opened element
Close other panels when one of the panel opened in accordion
Related Tags