JavaScript function to hide/unhide panel

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 f开发者_运维问答unction 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>

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

Try this:

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

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/