CODEWITHSUNDEEP
javascriptasp.nethtmlvisual-studio-2010
Ghassan
Ghassan

Reputation: 351

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

Upvotes: 1

Views: 15683

Answers (3)

Amir Ismail
Amir Ismail

Reputation: 3883

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

Upvotes: 4

nkm
nkm

Reputation: 5914

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/

Upvotes: 1

Frank Allenby
Frank Allenby

Reputation: 4392

Try this:

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

Upvotes: 3

Related Questions