CODEWITHSUNDEEP
jqueryhtmlasp.netcsspanel
Jagtar
Jagtar

Reputation: 186

Building a collapsible and expandable panel in asp.net

I have the following code for two panels:

    <asp:Panel runat="server" class="sectionLabels">
<asp:Label runat="server" Text="DetailsForm"></asp:Label>
</asp:Panel>

<asp:Panel ID="Details" runat="server" CssClass="panelStyle">
<table>
<tr>
<td class="columnA">
<asp:Label runat="server" Text="Name"></asp:Label>
</td>
<td>
<asp:TextBox runat="server" ID="Name"></asp:TextBox>
</td>
</tr>
<tr>
<td class="columnA">
<asp:Label runat="server" Text="Contact"></asp:Label>
</td>
<td>
<asp:TextBox runat="server" ID="ContactDetails"></asp:TextBox>
</td>
</tr>
</table>
</asp:Panel>

I tried AJAX CollapsiblePanel method and jQuery toggle method.

Can somebody please help me with this?

Basically when the first panel is click, the second should be hidden or shown alternatively.

Upvotes: 1

Views: 10498

Answers (3)

Singh
Singh

Reputation: 555

jQuery would make it really easy:

$(document).ready(function () {
        $("#contentPanel").hide();
        $("#headerPanel").click(function () {
            $(this).next("#contentPanel").slideToggle("medium");
        });
    });

Also, you could use classes rather than ID's which would come in very handy when there are lots of repetitive functions.

Upvotes: 1

shammelburg
shammelburg

Reputation: 7308

add a div around each panel and set IDs to both

id=div1 with panel1 id=div2 with panel2

$("document").ready(function(){
     //hide div2 onload
     $("#div2").hide();

     $("#div1").click(function(){
         $("div2").slideDown('normal');
         $("div1").slideup('normal');
     });
     $("#div2").click(function(){
         $("div1").slideDown('normal');
         $("div2").slideup('normal');
     });
});

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

try this, here #panel1 and #panel2 are ids of your panel tag

$('#panel1, #panel2').click(function(){
     if($('#panel1').is(':visible'))
     {
       $('#panel1').hide();
       $('#panel2').show();
     }
     else if($('#panel2').is(':visible'))
     {
       $('#panel2').hide();
       $('#panel1').show();
     }
   });

Upvotes: 1

Related Questions