부트 스트랩 : 아코디언 행 : 여러 줄이있는 경우 펼치기 접기 아이콘 변경

Question

일부 아코디언 행이있는 표가 하나 있습니다. 행 확장/축소시 펼치기 접기 아이콘을 변경하고 싶습니다. 1 행에 성공했습니다. 나는 여러 행을 위해 그것을 시도 할 때, 내 코드는 각 아코디언의 플래그 상태를 저장해야

아무도 솔루션을

var flag = true; 
$('.togglebutton').click(function() { 
     if (flag == true) { 
      this.getElementsByTagName('img')[0].src = "../images/minus.png"; 
      flag = false; 
     } else { 
      this.getElementsByTagName('img')[0].src = "../images/plus.png"; 
      flag = true; 
     } 
    }) 

<tr class="clickable apply-max-width"> 
          <td class="table-tr1-td1 togglebutton"><b aria-hidden="true" data-toggle="collapse" data-target="#accordion"><img src="../images/plus.png"/></b></td> 

          <td>abcd@gmail.com</td> 
          <td colspan="2">WD100165</td> 
          <td>2/1/2017</td> 
          <td>YES</td> 
          <td></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td></td> 
          <td colspan="2"> 
           <div id="accordion" class="accordion collapse data-found"> 

            <table class="table table-striped data-table-inner-disabled div-found"> 
             <thead> 
              <tr> 
               <th></th> 
               <th class="">Application</th> 
               <th class="">App Role</th> 
               <th>Workflow Status</th> 

              </tr> 
             </thead> 
             <tbody> 
              <tr> 
               <td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td> 
               <td class="application-User-inv">Portal</td> 
               <td>User</td> 
               <td>Pending Approval</td> 
              </tr> 
              <tr> 
               <td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td> 
               <td class="application-User-inv">SSR</td> 
               <td>User</td> 
               <td>Provisioned</td> 
              </tr> 
             </tbody> 
            </table> 

           </div> 
          </td> 
          <td></td> 
          <td> 

          </td> 
          <td></td> 
         </tr> 
         <tr class="clickable apply-max-width"> 
          <td class="table-tr1-td1 togglebutton"><b aria-hidden="true" data-toggle="collapse" data-target="#accordion2"><img src="../images/plus.png"/></b></td> 

          <td>abcd@gmail.com</td> 
          <td colspan="2">WD100165</td> 
          <td>2/1/2017</td> 
          <td>YES</td> 
          <td></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td></td> 
          <td colspan="2"> 
           <div id="accordion2" class="accordion collapse data-found"> 

            <table class="table table-striped data-table-inner-disabled div-found"> 
             <thead> 
              <tr> 
               <th></th> 
               <th class="">Application</th> 
               <th class="">App Role</th> 
               <th>Workflow Status</th> 

              </tr> 
             </thead> 
             <tbody> 
              <tr> 
               <td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td> 
               <td class="application-User-inv">Portal</td> 
               <td>User</td> 
               <td>Pending Approval</td> 
              </tr> 
              <tr> 
               <td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td> 
               <td class="application-User-inv">SSR</td> 
               <td>User</td> 
               <td>Provisioned</td> 
              </tr> 
             </tbody> 
            </table> 

           </div> 
          </td> 
          <td></td> 
          <td> 

          </td> 
          <td></td> 
         </tr> 

Answer 1

가있는 경우 저를 도와주세요 다른 행에 심하게와 충돌 작동합니다. 이 완벽하게 나를 위해 jQuery를 데이터()를 사용하고이 작업을 수행하는 간단한 방법 ...

$('.togglebutton').data("flag",1); 
$('.togglebutton').click(function() { 
    var $t = $(this); 
    if ($t.data("flag") == 1) { 
     $t.find('img')[0].src = "//placehold.it/40/?text=M"; 
     $t.data("flag",0); 
    } else { 
     $t.find('img')[0].src = "//placehold.it/40/?text=P"; 
     $t.data("flag",1); 
    } 
}) 

http://codeply.com/go/e49vQb4wE4