When a user clicks on a button, I want to change the displayed text and toggle between two different classes simultaneously. However, my current code only does one of these actions and not both.
$(document).ready(function() {
$('.more-benefits-btn').click(function() {
$(this).text($(this).text() == 'Show Less' ? 'Show More Benefits' : 'Show Less');
$("i", this).toggleClass('fal fa-chevron-down fal fa-chevron-up');
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span class="more-benefits-btn">Show More Benefits <i class="fal fa-chevron-down"></i></span>