Multiple control instances using jQuery and ASP.NET controls

Question

<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!

Ron DeVera · Accepted Answer · 2009-03-22 18:41:57Z

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().

edited Mar 22, 2009 at 18:41

answered Mar 22, 2009 at 17:14

Ron DeVera

14.7k6 gold badges43 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Richard Over a year ago

If select by class for the cpBody though you will toggle all body panels whenever any of the headers are clicked so they will not work independantly.

Ron DeVera Over a year ago

Actually, my original was a bit incorrect in that it was looking for a .cpBody nested inside the clicked .cpHeader, which the question's code didn't contain. I've updated my code so that it uses .next() to get the .cpHeader's next sibling, rather than .find(), which selects children.

splattne · Accepted Answer · 2009-03-22 17:25:58Z

1

I guess you have to use $('.pHeader') and $('.pBody') instead of $('#pHeader') and $('#pBody') if you assign the CSS class pHeader to every Panel.

The "#" character selects an element with the id after the "#" sign. The "." is used to get all elements to which you apply a certain CSS class name.

So, code this should work:

<script type="text/javascript">
$(document).ready(function() {
     $('.pHeader').click(function() {
         $('.pBody').slideToggle('fast');
     });
});
</script>

edited Mar 22, 2009 at 17:25

answered Mar 22, 2009 at 16:56

splattne

104k54 gold badges206 silver badges250 bronze badges

Comments

Richard · Accepted Answer · 2009-03-22 17:48:11Z

Hi the main problem you have with ASP.NET is that the controls will create a custom client side ID for each element when within a custom control. To avoid this trap, place the code you have inside an ascx custom control like this, putting serverside inline code to write out the custom client id. this way you can have multiple controls all working independently.

<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>



 <script type="text/javascript">
        $(function() {
            $('#<%=this.pHeader.ClientID %>').click(function() {
                $('#<%=this.pBody.ClientID %>').slideToggle('fast');
            });
        });
     </script>

Collectives™ on Stack Overflow

Multiple control instances using jQuery and ASP.NET controls

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related