How to make a Bootstrap v4 accordion collapse when clicking the whole header div?

Question

Initially, bootstrap v4 accordion is collapsible when the area which has text is clicked. How I can make it collapsible to the whole area of that div.

Here the code of bootstrap.

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

Answer 1

add this style to your css

.mb-0 > a {
  display: inline-block;
  width: 100%;
  padding:0.75rem 1.25rem;
}
.card-header {
  padding:0;
}

Try with demo , run the snippet and click full screen view

.mb-0 > a {
  display: inline-block;
  width: 100%;
  padding:0.75rem 1.25rem;
}
.card-header {
  padding:0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
<style>

.mb-0 > a {
  display: inline-block;
  width: 100%;
  padding:0.75rem 1.25rem;
}
.card-header {
  padding:0;
}

</style>
<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha256-5+02zu5UULQkO7w1GIr6vftCgMfFdZcAHeDtFnKZsBs=" crossorigin="anonymous"></script>

Answer 2

Just change anchor order, I haven't found another easy solution.

Take note that v4 of bootstrap at this moment is in alpha release and at this moment is giving some strange script error.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>



<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <div class="card-header" role="tab" id="headingOne" >
      <h5 class="mb-0">
        
          Collapsible Group Item #1
        
      </h5>
    </div>
</a>
    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    <div class="card-header" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion">
      <h5 class="mb-0">
    
          Collapsible Group Item #2
        
      </h5>
    </div>
    </a>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

Answer 3

Just use data-target on the header divs..

<div class="card-header" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
     <h5 class="mb-0">
        <a href>
           Collapsible Group Item #1
        </a>
     </h5>
</div>

http://www.codeply.com/go/f6LLnOaKHu

Answer 4

I dropped to use Accordion because a few my customers requested to compare 2 answers, but mostly because of efficiency to use simple HTML5 Details control that I tested for 1000 questions! in a single FAQ page for my new customer's estimate. The issues with the Accordion starts from 140 items, see https://github.com/twbs/bootstrap/issues/26419

Here is simplest and efficient solution with full control and automatic "Collapse All" button appearance and disappearance. If you would like to see the more advanced implementation on the real website: https://airtempheating.com/faq

---

<details>
<summary>
  The temperature in my home feels fine, but the indoor fan runs constantly. What’s wrong?</summary>
When you switch the fan to “On” versus “Auto” your indoor fan will run continuously. Turn the switch to “Auto” and the fan will run only as needed.
</details>
<details>
<summary>
  Is there any advantage to setting the thermostat fan setting to “On” or “Auto” mode all the time?</summary>
Yes! You will have constant filtering of the air. A second advantage is that the constant airflow will allow an even temperature throughout your home. 
However, if your home feels very humid, set the fan to the “Auto” mode.
</details>
<details>
<summary>
  How long does a typical furnace or air conditioner last?</summary>
New air conditioning and heating equipment lasts longer than ever! The end of a furnace's or air conditioner’s service life depends on more than just chronological age. 
Energy-efficiency issues and the price of any necessary repairs versus the cost of upgrading to a new unit all enter into that determination.
</details> <hr>    
<button type="button" id="hdn" class="btn btn-primary" onClick="window.location.reload();">Collapse All</button>

<style>
#hdn{display:none; visibility:visible}
</style>

<script>
$(function() {$('summary').click(function() {if($('#hdn').css("display") == "none"){$('#hdn').show();}});});
</script>

Answer 5

Bootstrap 4.3 adds the .stretched-link utility class. Using this, you can fairly easily add .stretched-link to the link, and add .position-relative to the card-header.

Using the example from the question:

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header position-relative" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="stretched-link">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header position-relative" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed stretched-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

There's quite a bit of documentation on this in the Bootstrap documentation along with other examples.