GridView의 항목 펼치기/접기

Question

자바 스크립트가 특정 항목에서 잘 작동합니다. ASP.NET GridView에서 항목 필드를 확장/축소하는 데 동일한 코드를 사용하고 싶습니다. 다음 코드는 첫 번째 항목에만 적용되지만 나머지 항목에는 적용되지 않습니다. 어떤 아이디어?

<script type="text/javascript"> 
    jQuery(function ($) { 
     var setupModule = function() { 
      $('#panels-demo').dnnPanels(); 
      $('#panels-demo .dnnFormExpandContent a').dnnExpandAll({ 
       targetArea: "panels-demo" 
      }); 
     }; 
     setupModule(); 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() { 
      // note that this will fire when _any_ UpdatePanel is triggered, 
      // which may or may not cause an issue 
      setupModule(); 
     }); 
    }); 
</script> 

영문 페이지 :

<ItemTemplate> 
       <div class="dnnForm" id="panels-demo"> 
        <div class="dnnFormExpandContent"><a href="#">Expand All</a></div> 
        <h2 id="tabPassport" class="dnnFormSectionHead"><a href='<%# "#" & Eval("ApplicationID") %>'>Options</a></h2> 
        <fieldset class="dnnClear"> 
         <img src="<%=ResolveUrl("/images/passport.jpg") %>" alt="Passport upload" class="dnnLeft" style="width: 10px; height: 10px" /> 
         <div class="dnnRight" style="width: 90%; margin-left: 2%"> 

          <label>Email user</label> 

          <asp:Label runat="server" ID="StatusLabel"></asp:Label> 
         </div> 
        </fieldset> 
       </div> 
      </ItemTemplate> 

Answer 1

는 모든 항목을 축소하려면 페이지에이 추가 (편집 'DIV [ID^= "패널 - 데모'자신의 JQuery와 선택기로!) :

<pre> 
<script type="text/javascript"> 
    jQuery(function ($) { 
     //collapse panels 
     $('div[id ^= "panels-demo"] a').removeClass('dnnSectionExpanded');   
     $('fieldset.dnnClear').hide(); 
    }); 
</script> 
</pre> 

모든 항목을 확장하려면이 옵션을 추가하지 :

<pre> 
<script type="text/javascript"> 
    jQuery(function ($) { 
     //expand paneles 
     $('div[id ^= "panels-demo"] a').addClass('dnnSectionExpanded'); 
     $('fieldset.dnnClear').show(); 
    }); 
</script> 
</pre>