asp.net - JavaScript function to hideunhide panel - Stack Overflow

admin管理员组

文章数量:1287652

I'm using asp(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>

I'm using asp(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>

• javascript
• asp
• html
• visual-studio-2010

Share Improve this question Follow edited Feb 15, 2014 at 15:35 BenMorel 36.6k5151 gold badges205205 silver badges336336 bronze badges asked Sep 21, 2011 at 8:56 GhassanGhassan 35155 gold badges1010 silver badges1919 bronze badges 1

• 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 Commented Sep 21, 2011 at 9:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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

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./toggle/

http://api.jquery./hide/

http://api.jquery./show/

本文标签： aspnetJavaScript function to hideunhide panelStack Overflow