Prevent Bootstrap 5 Accordion from collapsing

Question

I'm using Bootstrap 5's Accordion component. Good news: it works perfectly well!

But the button for collapse the accordion is big, so I want to add an additional link in it, for some extra stuff.

    <div class="accordion accordion-flush" id="myaccordion">
        <div class="accordion-item">
<!-- important part starts here -->
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-001" aria-expanded="false" aria-controls="collapse-001">
                <img src="https://picsum.photos/50/50" alt="such a nice pic"/>
                <p>Sneak peek of what will appear</p>
                <a href="http://www.lets-go.out">Let's go</a>
            <button>
<!-- important part is over -->
            <div id="collapse-001" class="accordion-collapse collapse" aria-labelledby="heading-001" data-bs-parent="#myaccordion">
                <div class="accordion-body">
                    <p>Hidden stuff goes here</p>
                </div>
            </div>
        </div>
        
        <div class="accordion-item">
            ...
        </div>
    </div>

What I want : Clicking anywhere in the button will open the accordion, but not if I click on the link. If I click on the link, I want to follow the href.

What I get : Clicking anywhere in the button will open the accordion, even if I click on the link.

I tried to add an extra e.preventDefault() or e.stopPropagation() on the link, without success :(

Any idea?

Answer 1

I tried nesting the anchor inside the button but it won't work. The click event is always catched at the button level. I didn't check bootstrap source code to check for alternatives but found a way to achieve what you asked using the following method: puth both the button and the link as children of a div and tweak with css to keep it visually on the same "line".

    <h2 class="accordion-header" id="headingOne">
      <div class="d-flex">
        <div class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Accordion Item #1
        </div>
        <a class="outlink" href="https://pullman.clubify.cl">Let's go</a>
      </div>
    </h2>