Beast_Code
Reputation: 3247
Bootstrap Accordion - Closing other panels when the intend is to open it's current panel
I am attempting to create an accordion with Bootstrap. My intent is to click on a title and have it open and close the panel without having other panels be affected.
In this situation, when I have panels 1 and 2/3 open and click to close 2 or 3, panel 1 ends up closing when it should not be affected at all.
@import url('http://getbootstrap.com/dist/css/bootstrap.css');<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Experience -->
<section class="container experience">
<div class="row">
<h2>Heading</h2>
<div class="col-md-3">
<span>lorem </span>
</div>
<!-- end of 1st column -->
<div class="col-md-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h3 class="panel-title">Title1</h3>
</a>
</div>
<!-- end of panel title -->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul>
<li>Lorem ipsum</li>
</ul>
</div>
<!-- end of panel body -->
</div>
<!-- end of panel collapse -->
</div>
<!-- end of panel default -->
</div>
<!-- end of accordion -->
</div>
<!-- end of middle column -->
<div class="col-md-3">
<span>blah</span>
</div>
<!-- end of 3rd column -->
</div>
<div class="row">
<div class="col-md-3">
<span>lorem</span>
</div>
<!-- end of 1st column -->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<h3 class="panel-title">Title2</h3>
</a>
</div>
<!-- end of panel title -->
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul>
<li>Lorem ipsum</li>
</ul>
</div>
<!-- end of panel body -->
</div>
<!-- end of panel collapse -->
</div>
<!-- end of panel default -->
</div>
<!-- end of middle column -->
<div class="col-md-3">
<span>lorem</span>
</div>
<!-- end of 3rd column -->
</div>
<div class="row">
<div class="col-md-3">
<span>lorem</span>
</div>
<!-- end of 1st column -->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<h3 class="panel-title">Title3</h3>
</a>
</div>
<!-- end of panel title -->
<div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<ul>
<li>Lorem ipsum</li> </ul>
</div>
<!-- end of panel body -->
</div>
<!-- end of panel collapse -->
</div>
<!-- end of panel default -->
</div>
<!-- end of middle column -->
<div class="col-md-3">
<span>lorem</span>
</div>
<!-- end of 3rd column -->
</div>
</section>
<!-- end of experience -->Also, how do I have the accordions closed by default when page loads?
Upvotes: 0
Views: 1409
Answers (1)
vanburen
Reputation: 21653
Remove the data-parent attribute to disconnect them from one another and remove in from class="panel-collapse collapse" if you want them to start off closed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!-- Experience -->
<section class="container experience">
<div class="row">
<h2>Heading</h2>
<div class="col-md-3"> <span>lorem </span>
</div>
<!-- end of 1st column -->
<div class="col-md-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h3 class="panel-title">Title1</h3>
</a>
</div>
<!-- end of panel title -->
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul>
<li>Lorem ipsum</li>
</ul>
</div>
<!-- end of panel body -->
</div>
<!-- end of panel collapse -->
</div>
<!-- end of panel default -->
</div>
<!-- end of accordion -->
</div>
<!-- end of middle column -->
<div class="col-md-3"> <span>blah</span>
</div>
<!-- end of 3rd column -->
</div>
<div class="row">
<div class="col-md-3"> <span>lorem</span>
</div>
<!-- end of 1st column -->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<a role="button" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<h3 class="panel-title">Title2</h3>
</a>
</div>
<!-- end of panel title -->
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul>
<li>Lorem ipsum</li>
</ul>
</div>
<!-- end of panel body -->
</div>
<!-- end of panel collapse -->
</div>
<!-- end of panel default -->
</div>
<!-- end of middle column -->
<div class="col-md-3"> <span>lorem</span>
</div>
<!-- end of 3rd column -->
</div>
<div class="row">
<div class="col-md-3"> <span>lorem</span>
</div>
<!-- end of 1st column -->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<a role="button" data-toggle="collapse" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<h3 class="panel-title">Title3</h3>
</a>
</div>
<!-- end of panel title -->
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<ul>
<li>Lorem ipsum</li>
</ul>
</div>
<!-- end of panel body -->
</div>
<!-- end of panel collapse -->
</div>
<!-- end of panel default -->
</div>
<!-- end of middle column -->
<div class="col-md-3"> <span>lorem</span>
</div>
<!-- end of 3rd column -->
</div>
</section>
<!-- end of experience -->Upvotes: 1
Related Questions
- Collapse plugin: Only show one panel at a time
- bootstrap accordion - don't collapse if clicking on open panel
- Bootstrap 4 Collapse Accordion - always have one panel open
- Twitter Bootstrap multiple accordions but only one open panel at a time
- Bootstrap accordion - Dont close other accordion unless user click to close
- Multiple bootstrap accordion panels - only one open at a time
- One panel open at a time on accordion using Collapse
- Closing accordion panels when another opens
- Open a specific accordion panel in a nested accordion (Bootstrap v3)
- Closing parent accordion needs to close all children accordion