Icon in button not registering click event

Issue

I have a button with text and a down-arrow icon, which I use to trigger a dropdown. When I click the text part of the button, the dropdown appears, and I have some jquery to amend the text and flip the arrow - great. But when I click the icon part of the button, the text changes and the icon flips but the dropdown doesn't appear.

Do I convert it to an anchor link and change the clickable area, or is there a more simple solution?

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">');
  }
});

Solution

In the end I solved it with the following:

<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"><span>See More </span>
<i class="bi bi-arrow-down"></i>
</button>

$('.button-drop').click(function() {
    $(this).find('i').toggleClass('bi bi-arrow-up');
    $(this).find('span').text(function(a, text) {
        return text === "See More " ? "See Less " : "See More ";
    });
});

Answered By - Tom