Bootstrap Data toggle collapse is not working. Issue is that when click on second link then first link is not toggle collapse
**Fiddle**
Try it. Now if you click on second link then first link is collapse.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="accordion">
<div class="card card-plain">
<div class="card-header" role="tab" id="heading1">
<a data-toggle="collapse" aria-expanded="true" aria-controls="collapse1" data-target="#collapse1">
Company Information
<i class="now-ui-icons arrows-1_minimal-down"></i>
</a>
</div>
<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1" data-parent="#accordion">
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<label>Company Name</label>
<input class="form-control" id="comp_entity" name="comp_entity" type="text" placeholder="Company Name" value="">
</div>
<div class="col-sm-6">
<label>Business Unit / Division</label>
<input class="form-control" id="bus_unit_div" name="bus_unit_div" type="text" placeholder="Business Unit / Division" value="">
</div>
</div>
</div>
</div>
</div>
<div class="card card-plain">
<div class="card-header" role="tab" id="heading2">
<a class="collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="collapse2" data-target="#collapse2">
Employee Information
<i class="now-ui-icons arrows-1_minimal-down"></i>
</a>
</div>
<div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="heading2" data-parent="#accordion">
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<label>Job title / role</label>
<input class="form-control" id="job_title" name="job_title" type="text" placeholder="Job Title / Role" value="">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>Hours of Work</label>
<input class="form-control" id="hours_of_work" name="hours_of_work" type="text" placeholder="Hours of Work" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" value="">
</div>
<div class="col-sm-6">
<label>Performance Rating</label>
<input class="form-control" id="perform_rating" name="perform_rating" type="text" placeholder="Performance Rating" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>Personnel (Staff) Number</label>
<input class="form-control" id="personal_staff_num" name="personal_staff_num" type="text" placeholder="Personnel (Staff) number" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" value="">
</div>
</div>
</div>
</div>
</div>
</body>
</html>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments