How to hide div of ascx from the code behind

I am trying to hide a div which written in a ascx. I am hiding it from code behind of aspx page where this ascx is registered.<br>

div code;

<div class="form-group col" runat="server" id="CorpCol" visible="false">

code behind;

System.Web.UI.Control CorpCol = FindControlRecursive(this.Master, "CorpCol");
CorpCol.Visible = false; 

I suggest you modify the user control, and expose that "div" as a public property of the user control.

Not only then does your code become rather simple, but you also find when you drop multiple instances of that user control on a page, then the hide/show of each "instance" of that div becomes nice clean and easy code.

So, say a user control to select a hotel, then a start, and end date.

And let’s have "div" in that user control that we want to hide (or show).

So, our simple user control markup is this:

<div style="float:left">

    <h3>Select Hotel</h3>
    <asp:DropDownList ID="cboHotel" runat="server" 
        Width="200px"
        DataValueField="ID"
        DataTextField="HotelName" 
        AutoPostBack="true" >
    </asp:DropDownList>

</div>

<div style="float:left;margin-left:30px;height:100px">
    <h3>Select Start Date</h3>
    <asp:TextBox ID="txtStartDate" runat="server" TextMode="Date">
    </asp:TextBox>
</div>

<div style="float:left;margin-left:30px">
    <h3>Select Start Date</h3>
    <asp:TextBox ID="txtEndDate" runat="server" TextMode="Date">
    </asp:TextBox>
</div>

<div id="mydiv" runat="server" style="float:left;margin-left:30px">
    <h3>My div area</h3>
    <img src='<%= ResolveClientUrl(@"~/Content/Rhotel.jpg") %>' 
        width="40" height="40" />
</div>

And the code for the user control:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            cboHotel.DataSource =
                General.MyRst("SELECT ID, HotelName FROM tblhotelsA ORDER BY HotelName");
            cboHotel.DataBind();
            cboHotel.Items.Insert(0, "Select Hotel");
        }
    }

    public HtmlGenericControl MyDiv
    {
        get { return mydiv; }
    }

Note how we just expose the "div" as a public property. And since it is an object, then no "setter" is required, only the above "get". And note the “id" and runat="server" tag for that div.

Ok, now our web page. Let’s drop in the user control 2 times, and then have 2 buttons. One to hide (or show) the first user control div. The 2nd button will hide/show the 2nd user control div.

So, this markup:

        <h3>First user control</h3>
        <uc1:USelectHotel runat="server" ID="USelectHotel" />

        <div style="clear:both"></div>
        <hr style="border:solid 2px" />

        <h3>Second user control</h3>
        <uc1:USelectHotel runat="server" ID="USelectHotel1" />

                    <div style="clear:both"></div>
        <hr style="border:solid 2px" />

        <asp:Button ID="cmdDiv1" runat="server" 
            Text="Hide show div 1" CssClass="btn btn-info" OnClick="cmdDiv1_Click"  />

        <asp:Button ID="cmdDiv2" runat="server" 
            Text="Hide show div 2" CssClass="btn btn-info"
            style="margin-left:35px" OnClick="cmdDiv2_Click"
            />

And the code behind for the 2 buttons:

    protected void cmdDiv1_Click(object sender, EventArgs e)
    {
        USelectHotel.MyDiv.Visible = !USelectHotel.MyDiv.Visible;
    }

    protected void cmdDiv2_Click(object sender, EventArgs e)
    {
        USelectHotel1.MyDiv.Visible = !USelectHotel1.MyDiv.Visible;
    }

So note how we can in code behind set USelecthotel1.MyDiv.Visible = false in code.

The result of above looks like this:

you must chaning style in code behind:

System.Web.UI.Control CorpCol = FindControlRecursive(this.Master, "CorpCol");
CorpCol.Style.Add("display", "none");

But the easiest way is to use JavaScript.
You can add jQuery to project and put the following code at the bottom of your page:

<script>
$("#CorpCol").click(function(){
 var CorpCol =  document.getElementById("CorpCol").style;
 if(CorpCol.display == 'none'){
	CorpCol.display = 'block';
 }
 else{
	CorpCol.display = 'none';
 }
});
</script>