How to hide a div using an ASP.NET Checkbox?

Question

i'm trying to do this assigning an method to the event on the checkbox tag like this:

    OnCheckedChanged="ShowDiv"

However, i'm not succesfull at all. How to do it? Here's my method:

    public void ShowDiv(object sender, System.EventArgs e) 
    {
        var div = FindControl("ListaEmOutrosDocumentos") as HtmlGenericControl;
        var checkbox = FindControl("Principal") as CheckBox;

        if(checkbox.Checked == true)
        {
            div.Style.Clear();
            div.Style.Add("display","block");
        }
        else
        {
            div.Style.Clear();
            div.Style.Add("display","none");
        }
    }

Does the display style attribute get rendered when the page re-renders? What value does it have? — Ann L.
– Ann L., Commented Oct 15, 2012 at 21:39
Also, I assume that you are posting back after checking the checkbox, either by setting AutoPostBack or having a separate postback trigger, such as a button. Is this so? — Ann L.
– Ann L., Commented Oct 15, 2012 at 21:40
@AnnL. I didn't think about de AutoPostBack setting. I'll try that! — Mateus Viegas
– Mateus Viegas, Commented Oct 15, 2012 at 21:44

Ann L. · Accepted Answer · 2012-10-15 21:39:47Z

2

You might consider using an ASP.NET Panel control instead of a div. That will have a Visible property that you can set.

answered Oct 15, 2012 at 21:39

Ann L.

14k5 gold badges39 silver badges67 bronze badges

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

1 Comment

Mikhail Over a year ago

It may introduce possible side effects. When the Visible property is set to false, the control is not rendered at all. display=none does a bit different thing: the control is rendered, but the visibility is controlled by CSS.

Zo Has · Accepted Answer · 2012-10-16 04:42:44Z

1

Quick way using server side code only

Aspx

<div id="myDiv" runat="server" style="height:200px;width:100px;background-color:Blue"></div>
<asp:CheckBox ID="chkShowHideDiv" runat="server" AutoPostBack="True" 
    oncheckedchanged="chkShowHideDiv_CheckedChanged" Text="Hide Div"  />

Code behind

 protected void chkShowHideDiv_CheckedChanged(object sender, EventArgs e)
{
    myDiv.Visible = chkShowHideDiv.Checked ? false : true;
}

answered Oct 16, 2012 at 4:42

Zo Has

13.1k24 gold badges92 silver badges150 bronze badges

Comments

Tariqulazam · Accepted Answer · 2012-10-15 21:45:28Z

1

I did this and it worked.

<div id="ListaEmOutrosDocumentos" runat="server">
            <asp:CheckBox runat="server" ID="Principal" AutoPostBack="True" OnCheckedChanged="ShowDiv"/>
        </div>

Code Behind

public void ShowDiv(object sender, System.EventArgs e)
    {
        var div = ListaEmOutrosDocumentos as HtmlGenericControl;
        var checkbox = sender as CheckBox;

        if (checkbox.Checked == true)
        {
            div.Style.Clear();
            div.Style.Add("display", "block");
        }
        else
        {
            div.Style.Clear();
            div.Style.Add("display", "none");
        }
    }

answered Oct 15, 2012 at 21:45

Tariqulazam

4,5831 gold badge38 silver badges44 bronze badges

Collectives™ on Stack Overflow

How to hide a div using an ASP.NET Checkbox?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related