Hiding Panels and Divs on ASP.NET is making me crazy.

Question

Searching on google, i deffinitly can't find a non-javascript way to show and hide my panel/updatepanel.

I do have panels and updatepanels, I want to show/hide them on the fly, after a button click, preferably without javascript, or if so, with jQuery.

All the examples I found consumes a lot of code and honestly I don't want to crap out my code just because of this.

Ideas?

Answer 1

It doesn't really take a lot of code with jQuery:

<input type="button" onclick="$('#blah').toggle();" />
<someelement id="blah"></someelement>

For ASP.NET (modified from your code):

<asp:Button ID="btnSubmit" runat="server" CssClass="button-login" OnClientClick="$('#login').toggle();" />

Answer 2

You could as well use the multi view and a couple of views inside. By doing this you can use a button control to choose which view (panel) is to be displayed. The code below will toggle between two views containing two image tags. ASP.NET Form (HTML)

<div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
<div>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
  <asp:View ID="View1" runat="server">
    <imgage = "my picture">    //add image tage here
  </view>
  <asp:View ID="View2" runat="server">
    <imgage = "your picture">  //add image tage here
  </view>
</asp: Multiview>
</div>

CODE BEHIND

Private button click toggleImageView

If multiview1.ActiveViewIndex=0 then
   multiview1.ActiveViewIndex=1
ElseIf 
   multiview1.ActiveViewIndex=1 then
   multiview1.ActiveViewIndex=0
EndIf

You may also use a list box to select which view to display on the fly like this But note that your control o select which view to be displayed should be outside the multiview control and also be rendered on page load

<asp:DropDownList ID="DropDownList1" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
                runat="server" AutoPostBack="True">
  <asp:ListItem Value="0">View 1</asp:ListItem>
  <asp:ListItem Value="1">View 2</asp:ListItem>
</asp:DropDownList><br />