изменить значок в расширяемом виде

Question

У меня есть таблица с расширяемым видом. при щелчке знака плюса он расширяется, но я хочу изменить знак плюса на минус (fa fa-plus to fa fa-minus), когда представление в расширенной форме и обратно к плюсу, когда оно находится в сжатой форме, может кто-нибудь рассказать, как это сделать (код @fiddle)

<script> 
    $(document).ready(function(){ 
     $("#report tbody tr:odd td:first-child").click(function(){ 
      $this=$(this); 
      $this.parent().next("tr").toggle(); 
      $this.find(".arrow").toggleClass("up"); 
     }); 
    }); 
     </script> 

     <table id="report" border="1" style="width:100%" > 
     <tr> 
      <th> First </th> 
      <th> Second </th> 
      <th> Third </th> 
     </tr> 

     <tr> 
      <td><i class="fa fa-plus"></i></td> 
      <td>1</td> 
      <td>1</td> 
     </tr> 
     <tr> 
      <td colspan="10"> 
       dummy text 1<br> 
       dummy text 1<br> 
       dummy text 1<br> 
      </td> 
     </tr> 
    </table> 

Answer 1

Если вы хотите простой способ использовать оба иконки со свойством display:none и display:block с общим классом и просто переключать их.

См action

Answer 2

Применить некоторый класс для родителей, чтобы определить, когда вы расширили элемент. Для расширенного элемента hide plus значок и значок «минус-минус» и наоборот.

$(document).ready(function() { 
 
    $('.toggler').click(function() { 
 
    $(this).toggleClass('active'); 
 
    }); 
 
});

.toggler { 
 
    padding: 3px 5px; 
 
    border: 1px solid #ddd; 
 
    float: left; 
 
} 
 
.icon-minus { 
 
    display: none; 
 
} 
 
.active .icon-plus { 
 
    display: none; 
 
} 
 
.active .icon-minus { 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="toggler"> 
 
    <span class="icon icon-plus">+</span> 
 
    <span class="icon icon-minus">-</span> 
 
</div>

Answer 3

По моим наблюдениям, я не нашел ни element с классом arrow, но я предполагаю, что вам нужно для переключения между fa-plus и fa-minus на collapse и expand. Таким образом, вы можете достичь его, как показано ниже:

$(document).ready(function(){ 
    $("#report tbody tr:odd td:first-child").click(function(){ 
     $this=$(this); 
     $this.parent().next("tr").toggle(); 
     $this.find("i").toggleClass("fa-plus fa-minus"); 
     //you find the "i" element in td and toggle its fa-plus and fa-minus 
    }); 
}); 

DEMO