CODEWITHSUNDEEP
javascriptjquery
emailcooke
emailcooke

Reputation: 281

jQuery toggle button text and Icon

I am trying to toggle both the icon and the button text on a button and each function works independently, but they will not work when run consecutively. Seems that the function to toggle the button text is removing my icon altogether.

<button type="button" id="toggle-list-details">
    <i class="fa fa-list fa-lg"></i> 
    List View
</button>

$("#toggle-list-details").click(function() {
    $(this).text(function(i, text){
        return text === " List View" ? " Details View" : " List View";
      });                                
    $(this).find('i').toggleClass('fa-list fa-th-list'); 
)};

Upvotes: 1

Views: 1871

Answers (1)

Andriy
Andriy

Reputation: 1027

When you do 

$(this).text(function(i, text){

this reffers to <button type="button" id="toggle-list-details">, so it replaces all inner content with plain text.

To avoid this, you can do smth like this:

<button type="button" id="toggle-list-details">
    <i class="fa fa-list fa-lg"></i> 
    <span class="text">List View</span>
</button>

$("#toggle-list-details").click(function() {
    $(this).find('span').text(function(i, text){
        return text === " List View" ? " Details View" : " List View";
      });                                
    $(this).find('i').toggleClass('fa-list fa-th-list'); 
)};

Upvotes: 3

Related Questions