Home/ Questions/Q 162907
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T11:28:27+00:00

<script type=text/javascript> $(document).ready(function() { $(‘#pHeader’).click(function() { $(‘#pBody’).slideToggle(‘fast’); }); }); </script> <asp:Panel ID=pHeader runat=server CssClass=cpHeader>

  • 0
<script type='text/javascript'>     $(document).ready(function() {         $('#pHeader').click(function() {             $('#pBody').slideToggle('fast');         });     });  </script>  <asp:Panel ID='pHeader' runat='server' CssClass='cpHeader'>     <asp:Label ID='lblText' runat='server' Text='Header' /> </asp:Panel>  <asp:Panel ID='pBody' runat='server' CssClass='cpBody'>     Lorem ipsum dolor sit amet, consectetur adipisicing elit,     sed do eiusmod tempor incididunt ut labore et dolore magna     aliqua. Ut enim ad minim veniam, quis nostrud exercitation     ullamco laboris nisi ut aliquip ex ea commodo consequat.     Duis aute irure dolor in reprehenderit in voluptate velit     esse cillum dolore eu fugiat nulla pariatur </asp:Panel>

As you can see from the above I am trying to achieve a collapsible panel. However the above will only work once. How can I make this accessible to multiple controls, i.e. if I have 10 panels on a page?

Thanks guys!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Try this:

    $(function(){   $('.cpHeader').click(function() {     $(this).next('.cpBody').slideToggle('fast');   }); });

    If you select by ID (e.g., #pHeader), you’ll only affect one node, since IDs are meant to be unique. Classes are meant to be assigned to multiple nodes.

    Also note the shortened first line, which jQuery provides as a shortcut for $(document).ready().

    • 0