JavaScript function to hide/unhide panel

Question

I'm using asp.net(C#) under visual studio 2010

I have a panel that is by default set 2 be hidden( visible=false)

I need to create a JavaScript function that would be executed on a button click to make this panel visible if hidden and hidden if visible. and this should be client side, here is the code I have so far

   <script type=text/javascript>

    function func1()
    {
    i need this code please
    }

<asp:Panel ID="ResultsPanel" runat="server">

Some controls

</asp:Panel>

<asp:button id=button1 runat=server onclick=javascript:func1()>Hide/Unhide</asp:button>

If you set visible=false, the panel will not show up in your DOM, and can not be set visible later. You should have visible=true, and then hide it with CSS (style="display:none"), and then show it with one of the below solutions. — Nicolai
– Nicolai, Commented Sep 21, 2011 at 9:16

Amir Ismail · Accepted Answer · 2011-09-21 09:10:04Z

4

first you need to use OnClientClick attribute instead of OnClick for your button, and if that button does not run any server side code you can use html button instead of asp:Button

 <input type="button" onclick="func1();" value="Hide/Unhide">

you can use toggle function in jquery to hide/unhide your panel

function func1()
{
   var mypanel = $('#<%=ResultsPanel.ClientID%>');
   mypanel.toggle();
}

DEMO

edited Sep 21, 2011 at 9:10

answered Sep 21, 2011 at 9:01

Amir Ismail

3,8713 gold badges22 silver badges35 bronze badges

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

Comments

Frank Allenby · Accepted Answer · 2011-09-21 09:02:48Z

3

Try this:

var Panel = document.getElementById("ResultsPanel");
if (Panel.style.display == "block" || Panel.style.display == "")
{
    Panel.style.display = "none";
}
else
{
    Panel.style.display = "block";
}

answered Sep 21, 2011 at 9:02

Frank Allenby

4,4021 gold badge21 silver badges17 bronze badges

Comments

nkm · Accepted Answer · 2011-09-21 09:08:18Z

1

If you are using jQuery, you may make use of following jQuery methods,

http://api.jquery.com/toggle/

http://api.jquery.com/hide/

http://api.jquery.com/show/

answered Sep 21, 2011 at 9:08

nkm

5,9142 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

JavaScript function to hide/unhide panel

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related