I have successfully implemented the Accordion component in Bootstrap 5, and it is working perfectly!
However, I am facing an issue with the size of the collapse button in the accordion, which is too big. I want to add an additional link to it for some extra content.
<div class="accordion accordion-flush" id="myaccordion">
<div class="accordion-item">
<!-- key section begins 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 the upcoming content</p>
<a href="http://www.lets-go.out">Let's go</a>
<button>
<!-- key section ends here -->
<div id="collapse-001" class="accordion-collapse collapse" aria-labelledby="heading-001" data-bs-parent="#myaccordion">
<div class="accordion-body">
<p>Additional content goes here</p>
</div>
</div>
</div>
<div class="accordion-item">
...
</div>
</div>
Desired Behavior : I want the accordion to open when clicking anywhere in the button except when I click on the link. If I click on the link, I want to follow the href.
Current Behavior : Currently, clicking anywhere in the button opens the accordion, even when clicking on the link.
I attempted to use e.preventDefault() or e.stopPropagation() on the link, but it did not work as expected. Any suggestions on how to achieve the desired behavior?