Question

I have a div with style=”display:none”. The div should become visible on pressing an html button:

function JSAdd() {
    document.getElementById('divDetail').style.display = "block";
}
    <div style="float:left">

    <div id="ctl00_MainContent_upnlLbRD">





            <select size="4" name="ctl00$MainContent$lbRD" id="ctl00_MainContent_lbRD" style="width:188px;">

    <option value="5">one</option>
    <option value="1">two</option>
</select>

    <input id="btnAdd" type="button" value="Добавить" onclick="JSAdd();" />
    <input id="btnEdit" type="button" value="Редактировать" onclick="JSEdit();" />
</div>
<div id="ctl00_MainContent_divDetail" style="display:none" clientidmode="static">
    <div id="ctl00_MainContent_upnlDescription">

            <div>

                <span id="ctl00_MainContent_lblDescription">Описание:</span>

                <input name="ctl00$MainContent$txtDescription" type="text" id="ctl00_MainContent_txtDescription" />  

                <span id="ctl00_MainContent_txtDescriptionRequiredFieldValidator" style="color:Red;visibility:hidden;">Описание является обязательным для заполнения</span>

            </div>

            <input type="submit" name="ctl00$MainContent$btnSave" value="Сохранить" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$btnSave&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_MainContent_btnSave" />   

I need to be able to make the div invisible again from code-behind. I cannot access the div unless it is runat="server". But when I add runat=”server”, the div doesn’t become visible on pressing the button from the javascript function above. Could you please help me with this?

Thanks,
David

Answer 1

You can access a div in code-behind by adding the runat="server" attribute. Adding this attribute does change the way you access the element in JavaScript though:

var el = document.getElementById("<%=div1.ClientID%>");
if (el){
    el.style.display = "none"; //hidden
}

There are two ways to adjust the visibility from code-behind, but since you’re setting display:none in JavaScript, you’d probably want to use the same approach in code-behind:

div1.Style["display"] = "block"; //visible

In code-behind, you can also set the Visible property to false, but this is different because it will prevent the element from being rendered at all.

EDIT

If the div is still showing with display:none present, you probably have an unclosed tag or quote somewhere affecting the markup. Double check and make sure that the markup is valid.