how to hide /show divs in asp.net

Question

1.00/5 (1 vote)

See more:

ASP.NET

Javascript

how we can hide and show some specific div contents using javascript and asp.net please share a tutorial plzzz

Posted 12-Nov-13 3:01am

irfanniazi

Updated 13-Jan-17 0:14am

Add a Solution

6 solutions

Solution 1

JavaScript

Call below function and pass the Control ID to hide/show it alternatively.

JavaScript

function toggleVisibility(controlId)
{
    var control = document.getElementById(controlId);

    if(control.style.visibility == "visible" || control.style.visibility == "")
        control.style.visibility = "hidden";
    else
        control.style.visibility = "visible";

}

Posted 12-Nov-13 3:05am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

Member 12772705 27-Dec-16 6:00am

This code work fine but when my page is post back it will not work all div get hidden

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 28-Dec-16 5:36am

Then check your code not to post back.

Solution 2

At first I thought you're talking about Show/Hide elements but realized the thing after couple of seconds. Here you go.
Dynamically shortened Text with “Show More” link using jQuery[^]

If I'm wrong then check this
Show/hide elements dynamically in web page[^]

Posted 12-Nov-13 4:03am

thatraja

Solution 3

See the following code

XML

<html>
<h2>Hide Div in JavaScript</h2>
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) {
document.getElementById('div').style.visibility = 'hidden';
}
}
function showDiv() {
if (document.getElementById) {
document.getElementById('div').style.visibility = 'visible';
}
}
</script>
<body onload="javascript:showDiv()">
<button onclick="javascript:hideDiv()">Hide</button>
<button onclick="javascript:showDiv()">Show</button>
<div id="div">Hello World</div>
</body>
</html>

Posted 12-Nov-13 4:38am

sankarsan parida

Solution 6

Hi, For this you can use jquery show() hide() . check the below link

http://www.dotnetpools.com/2013/06/code-to-hide-show-div-using-jquery.html[^]

Posted 12-Nov-13 19:38pm

vinay.Singh

Comments

Member 12772705 27-Dec-16 5:59am

it is not working when page is postback help me

Add a Solution

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

Rahul_Pandit · Accepted Answer · 2013-11-12T18:31:00

XML

<html>
<h2>Hide Div in JavaScript</h2>
<script language="javascript" type='text/javascript'>
function hideDiv() {
if (document.getElementById) {
document.getElementById('div').style.display= 'none';
}
}
function showDiv() {
if (document.getElementById) {
document.getElementById('div').style.display= 'block';
}
}
</script>
<body onload="javascript:showDiv()">
<button onclick="javascript:hideDiv()">Hide</button>
<button onclick="javascript:showDiv()">Show</button>
<div id="div">Hello World</div>
</body>
</html>

hsakarp · Accepted Answer · 2013-11-12T19:36:00

Solution 5

If you want to do it in server side.Simply make the div as server side by adding runat attribute and you can able to control the functionality of the div

Posted 12-Nov-13 19:36pm

hsakarp

how to hide /show divs in asp.net

6 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Solution 5

Solution 6

Add your solution here

Preview 0

how to hide /show divs in asp.net

6 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Solution 5

Solution 6

Add your solution here

Preview 0

Existing Members

...or Join us