CODEWITHSUNDEEP
jquery
OrElse
OrElse

Reputation: 9959

How can i toggle a class in a child span?

My html is

<tr>
  <td>
    <a id="@td.Id" href="javascript:void(0);" class="details">
      <i class="fal fa-search-plus"></i>
    </a>
   </td>
</tr>

How can i toggle the class from fa-search-plus to fa-search-minus and vice versa

by using the .details click event?

$('#myTable tbody').on('click', '.details', function (e) {
     e.preventDefault();
     var table = $('#myTable').DataTable();
     var tr = $(this).closest('tr');
     var row = table.row(tr);
});

As you may notice, i wish to apply the toggle class on the selected child node and not in the selected one.

Upvotes: 0

Views: 372

Answers (2)

epascarello
epascarello

Reputation: 207501

So select the i and toggle the classes with toggleClass()

$(this).find('i').toggleClass('fa-search-plus fa-search-minus')

Upvotes: 4

Mason
Mason

Reputation: 1126

Use $(selector).hasClass(classname) to check if that element has one of the two classes. If so, replace it with the other.

Upvotes: 0

Related Questions