Click here to Skip to main content
15,847,750 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:

I have a div tag in my aspx page. In that i placed a checkbox list. I want the div tag to be hidden on the page load and on click of the button i want the div tag to be displayed with the checkbox list. and the div tag should be scrollable. Please help me


In the declaration, add style="display:none;". So your div will look like:
<div id="someDiv" style="display:none;"></div>

This makes it hidden by default.

To show it, add following code in the button click:
<asp:Button ID="Button1" runat="server" OnClientClick="javascript:document.getElementById('someDiv').style.display='inline';" Text="Button" />

This will show the div back. Or if you are using jQuery, the syntax is

For showing scroll by default, check css overflow property[^]

Hope this helps!
Share this answer
komaliks 6-Jun-13 23:58pm    
Hi Ankur, I tried this option. but when i click on the button the div tag is appearing for few seconds and then disappearing. please help me on this
Prince Sagayaraj 7-Jun-13 1:12am    
you have to give "return false" in the OnClientClick. Otherwise it will call the server side event. So you lost the div.

Collapse | Copy Code
<asp:Button ID="Button1" runat="server" OnClientClick="javascript:document.getElementById('someDiv').style.display='inline';return false;" Text="Button" />
Ankur\m/ 7-Jun-13 7:19am    
Yes exactly. Thank you for adding.

Add the below Javascript code

function ShowDiv() {
           document.getElementById("dv").style.display = ""

Then Add the Below HTMl in the aspx page

<asp:button id="btnShowDiv" runat="server" text="Show Div" onclientclick="ShowDiv(); return false"  />
        <div id="dv" style="overflow-y: scroll; height: 100px; background-color: #FFFFFF;           width: 200px; display: none">
            <asp:checkboxlist id="cb" runat="server" xmlns:asp="#unknown">
                <asp:listitem text="Check Box 1" value="1"></asp:listitem>
                <asp:listitem text="Check Box 2" value="2"></asp:listitem>
                <asp:listitem text="Check Box 3" value="3"></asp:listitem>
                <asp:listitem text="Check Box 4" value="4"></asp:listitem>
                <asp:listitem text="Check Box 5" value="5"></asp:listitem>
                <asp:listitem text="Check Box 6" value="6"></asp:listitem>
                <asp:listitem text="Check Box 7" value="7"></asp:listitem>
                <asp:listitem text="Check Box 8" value="8"></asp:listitem>
                <asp:listitem text="Check Box 9" value="9"></asp:listitem>
                <asp:listitem text="Check Box 10" value="10"></asp:listitem>
                <asp:listitem text="Check Box 11" value="11"></asp:listitem>
                <asp:listitem text="Check Box 12" value="12"></asp:listitem>
                <asp:listitem text="Check Box 13" value="13"></asp:listitem>
                <asp:listitem text="Check Box 14" value="14"></asp:listitem>
                <asp:listitem text="Check Box 15" value="15"></asp:listitem>
                <asp:listitem text="Check Box 16" value="16"></asp:listitem>
                <asp:listitem text="Check Box 17" value="17"></asp:listitem>
                <asp:listitem text="Check Box 18" value="18"></asp:listitem>
                <asp:listitem text="Check Box 19" value="19"></asp:listitem>
                <asp:listitem text="Check Box 20" value="20"></asp:listitem>

I hope this one will help you.

Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900