CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Arslan
Arslan

Reputation: 433

Bootstrap toggle collapse is not working

Bootstrap Data toggle collapse is not working. Issue is that when click on second link then first link is not toggle collapse

**Fiddle**

Demo

Upvotes: 1

Views: 13311

Answers (3)

ankita patel
ankita patel

Reputation: 4251

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>

Upvotes: 3

Jaydeep
Jaydeep

Reputation: 39

otherwise

please remove class show in the first tab content div

from

<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1">

to

<div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="heading1">

and it will work.

Upvotes: 2

charan kumar
charan kumar

Reputation: 2157

use 'in' instead of 'show' in below code

<div id="collapse1" class="collapse in" role="tabpanel" aria-labelledby="heading1">

Upvotes: 1

Related Questions