title: How to make a Bootstrap v4 accordion collapse when clicking the whole header div?
body: <p>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.</p>
  
  <p>Here the code of bootstrap.</p>
  
  <pre><code>&lt;div id="accordion" role="tablist" aria-multiselectable="true"&gt;
    &lt;div class="card"&gt;
      &lt;div class="card-header" role="tab" id="headingOne"&gt;
        &lt;h5 class="mb-0"&gt;
          &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;
            Collapsible Group Item #1
          &lt;/a&gt;
        &lt;/h5&gt;
      &lt;/div&gt;
  
      &lt;div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne"&gt;
        &lt;div class="card-block"&gt;
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card"&gt;
      &lt;div class="card-header" role="tab" id="headingTwo"&gt;
        &lt;h5 class="mb-0"&gt;
          &lt;a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&gt;
            Collapsible Group Item #2
          &lt;/a&gt;
        &lt;/h5&gt;
      &lt;/div&gt;
      &lt;div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"&gt;
        &lt;div class="card-block"&gt;
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>