I am facing an issue with a button that includes both text and a down-arrow icon. When I click on the text part of the button, a dropdown appears as expected, and I have incorporated jQuery to update the text and rotate the arrow icon - all working fine. However, when I click on the icon part of the button, the text changes and the icon flips but the dropdown does not show up.
Should I change it to an anchor link and adjust the clickable area, or is there a simpler solution available?
HTML
<button type="button" class="btn btn-info button-drop text-nowrap" data-toggle="collapse" data-target="#ph-detail" aria-expanded="false" aria-controls="ph-detail">See More
<i class="bi bi-arrow-down"></i>
</button>
<div class="collapse" id="ph-detail">
<p>Expandable content</p>
</div>
JQuery
$('.button-drop').click(function() {
$(this).toggleClass( "active" );
if ($(this).hasClass("active")) {
$(this).html('See Less <i class="bi bi-arrow-up">');
} else {
$(this).html('See More <i class="bi bi-arrow-down">');
}
});