Icon in button not registering click event

Question

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

Answer 1

Both of the code are working for me. I think you have not added the cdnjs file of jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

 $('.button-drop').click(function() { $(".button-drop").toggleClass( "active" ); if ($(".button-drop").hasClass("active")) { $(".button-drop").html('See Less <i class="bi bi-arrow-up">'); } else { $(".button-drop").html('See More <i class="bi bi-arrow-down">'); } });

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

Answer 2

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