Bootstrap toggle collapse is not working

bootstrap 4 collapse not working
bootstrap collapse not working in angular
bootstrap collapse not working properly
bootstrap 3 collapse not working
bootstrap: collapse other sections when one is expanded
bootstrap accordion not working
bootstrap 4 accordion with arrow
bootstrap accordion with icon

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

**Fiddle**  

Demo

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>

Bootstrap Toggle Button Collapse Not Working [Solved], Hello, I was implementing the bootstrap toggle collapse option in my code so that the webpage is responsive to small screen sizes. However  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

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.

Collapse · Bootstrap, To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute​  Code for collapse: If components dont work for you please check including of bootstrap.js file. Without it components will not work. You need to check 'bootstrap_js_cdn' in template settings.

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

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

Bootstrap 4 Collapse, Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS  Javascript toggle with Bootstrap collapse plugin. 1139. Center a column using Twitter Bootstrap 3. 2. Bootstrap Collapse not working with Ajax created content.

Bootstrap 4 JS Collapse Reference, Bootstrap Collapse not working (no error to console) <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible  It is a HTML5 data attribute that automatically hooks up the element to the type of widget it is. Some Examples: [code]data-toggle="modal" data-toggle=";collapse&quot; data-toggle=&quot;dropdown&quot; data-toggle=&quot;tab&quot; [/code]Go through the JavaScript docs and se

Bootstrap Collapse not working (no error to console) [#2214853 , In my web application the bootstrap hide collapse is not working. Collapsible</​h2> <p>Click on the button to toggle between showing and  I was doing it through a jQuery plugin so I can quickly build Bootstrap components through javascript. To cut a long story short binding the data elements of the button through jQuery .data() resulted in a collapse button that didn't work, doing it via .attr() fixed the issue.

Bootstrap hide collapse is not working, bootstrap collapse does not work with dynamic content #2274 data-toggle="​collapse" class="accordion-toggle">2012</a> </div> <div class="accordion-body​  Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

Comments
  • You're required to put your code here, not just use a code block for your link.
  • I have added <div id="accordion"></div> and change bootstrap library(4.1.1) .
  • Please update your answer to explain what you changed. Don't make folks scour comments to figure it out.