tester
Reputation: 459
Closing one accordion tab opening the other one by default
Bootstrap accordion is not working correctly.If i click on one accordion tab it is closing the other one and some times it is closing and opening again.For the first time it is working fine but for the next time its not working correctly.If i click on one tab it is closing the other one or else it will be opened by default after closing
<div class="col-lg-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">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Notify Users
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form>
<div class="row">
<div class="form-group">
<div class="col-lg-6">
<select id="selection" class="form-control">
<option>All Users</option>
<option>Metronomic</option>
<option>Fairfax Users</option>
</select>
</div>
<div class="col-lg-6">
<select id="selection" class="form-control">
<option>App Notify</option>
<option>Email</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" placeholder="Notification title here..." id="title">
</div>
<div class="form-group">
<label for="last">Sub Title</label>
<input type="text" class="form-control" placeholder="Notification sub title here..." id="sub-title">
</div>
<div class="form-group">
<label for="notificationcontent">Notification Content</label>
<textarea class="form-control" placeholder="" id="notificationcontent"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Notification</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
Notify Users
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<form>
<div class="row">
<div class="form-group">
<div class="col-lg-6">
<select id="selection" class="form-control">
<option>All Users</option>
<option>Metronomic</option>
<option>Fairfax Users</option>
</select>
</div>
<div class="col-lg-6">
<select id="selection" class="form-control">
<option>App Notify</option>
<option>Email</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" placeholder="Notification title here..." id="title">
</div>
<div class="form-group">
<label for="last">Sub Title</label>
<input type="text" class="form-control" placeholder="Notification sub title here..." id="sub-title">
</div>
<div class="form-group">
<label for="notificationcontent">Notification Content</label>
<textarea class="form-control" placeholder="" id="notificationcontent"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Notification</button>
</form>
</div>
</div>
</div>
</div>
</div>
Upvotes: 1
Views: 1479
Answers (1)
Udhay Titus
Reputation: 5869
you wrongly assigned data-parent="#accordion", you have to assign this for Collapse div and use single parent <div id="accordion"></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="col-lg-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="row">
<div class="panel panel-default col-md-6">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Notify Users
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="panel-body">
<form>
<div class="row">
<div class="form-group">
<div class="col-lg-12">
<select id="selection" class="form-control">
<option>All Users</option>
<option>Metronomic</option>
<option>Fairfax Users</option>
</select>
</div>
<div class="col-lg-12">
<select id="selection" class="form-control">
<option>App Notify</option>
<option>Email</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" placeholder="Notification title here..." id="title">
</div>
<div class="form-group">
<label for="last">Sub Title</label>
<input type="text" class="form-control" placeholder="Notification sub title here..." id="sub-title">
</div>
<div class="form-group">
<label for="notificationcontent">Notification Content</label>
<textarea class="form-control" placeholder="" id="notificationcontent"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Notification</button>
</form>
</div>
</div>
</div>
<div class="panel panel-default col-md-6">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
Notify Users
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="panel-body">
<form>
<div class="row">
<div class="form-group">
<div class="col-lg-12">
<select id="selection" class="form-control">
<option>All Users</option>
<option>Metronomic</option>
<option>Fairfax Users</option>
</select>
</div>
<div class="col-lg-12">
<select id="selection" class="form-control">
<option>App Notify</option>
<option>Email</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" placeholder="Notification title here..." id="title">
</div>
<div class="form-group">
<label for="last">Sub Title</label>
<input type="text" class="form-control" placeholder="Notification sub title here..." id="sub-title">
</div>
<div class="form-group">
<label for="notificationcontent">Notification Content</label>
<textarea class="form-control" placeholder="" id="notificationcontent"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Notification</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>Upvotes: 1
Related Questions
- Accordion with one tab always expanded. Bootstrap 5
- How do I keep one accordion tab open and not allow it to shut unless another is opened?
- Allow more than one accordion to open at the same time
- Multiple Bootstrap accordion are opening and closing at the same time
- Setting Bootstrap Accordion to be closed & expand tab on click
- Accordion tabs do not open after 1st click
- Bootstrap accordion hide when another open
- How to get one accordion tab open at a time Bootstrap
- HTML Accordion first one can't be automatically closed CSS Bootstrap
- Bootstrap Accordion - Closing other panels when the intend is to open it's current panel