Link inside Bootstrap accordion header

Jonathan Chen 0
Viewed 27

Is there a way to include a link to the header of a bootstrap accordion? Adding <a href>Link</a> breaks the accordion for me. The link would go to the linked page but clicking anywhere else on the header would open the accordion as normal. Pretty much the same as this unanswered question.

accordion hyperlink bootstrap-4
1 Answers

Try to click on "Click me".

See the snippet here.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
          <a href="https://www.google.com/" target="_blank">Click me</a>
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
</div>
Cervus camelopardalis0
Related