asked on

Trying to hide a div with javascript function

Hello
In aspx, I need to hide a <div> with javascript, based on certain condition.

I tried to code:

<SCRIPT language="javascript">
 function ShowHide(xx) {

            if (xx == 'condition') {
                return "display:none;";
            }
            else {
                return "";
            };
        }	
</SCRIPT>

<div  style='javascript:ShowHide("condition");'> 
               Hello
</div>

Open in new window

But no success. Word Hello is still showing.

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jagadishwor Dulal

Try this one:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
    var myval=$('#mydiv').attr('style');
	if(myval=='condition'){
		$('#mydiv').show();
	}else{
		$('#mydiv').hide();
	}
});
</script>
</head>
<body>
<div id="mydiv" style="condition">Hello</div>     
</body>
</html>

Open in new window

miyahira

ASKER

No success.
Is there a way to hide or show a div programmatically not with server code but with client code?

hielo

If all you are trying to do is show/hide, there is no need for a "condition" parameter. You can extract the css display property from the target element (the element you are trying to show/hide) and based on its value, you either show it or hide it. The code below is client side code.

<script type="text/javascript">
function ShowHide(targetElement, triggerElement) {
	targetElement.style.display = targetElement.style.display=='none'?'':'none';
	triggerElement.value = targetElement.style.display=='none'?'Show':'Hide';
}	
</script>
<input type="button" value="Hide" onclick="ShowHide( document.getElementById('theDiv'), this )" />
<div id="theDiv"> 
               Hello
</div>

Open in new window

Zeickan

Try this:

<SCRIPT language="javascript">
 function ShowHide(id) {

 	var box = document.getElementById(id);
 	var xxx = box.style.display;

    if (xxx == 'none') {
       box.style.display = "block"
    }
    else {
       box.style.display = "none";
    };
}	
</SCRIPT>

<div id="example">Hello</div>     

<a href="javascript:ShowHide('example');">Show/Hide</a>

Open in new window

nap0leon

If you just want to always hide it, just put this at the bottom of the page:

<script type="javascript/text">
document.getElementById('your_id_goes_here').style.display = 'none';
</script>

Open in new window

Ideally, this would go into a document-ready or window-load function as described above.

Or... use the ShowHide function previously posted Zeikcan and place a call to that function as described in the code sample above.

Jagadishwor Dulal

Did you check what i post on previous comment. It's for concept what is your progress??

Dave Baldwin

From another question today https://www.experts-exchange.com/questions/28168426/Using-a-Checkbox-to-clear-cookies.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
// hide div
document.getElementById('theHint').style.visibility = 'hidden';
document.getElementById('theHint').style.display = 'none';
}
// -->
</script>
</head>
<body>


<div id="theHint">
<input type="checkbox" onclick="setCookie('newmember','off',10000)" />If you check this checkbox, this hint will not show again.<br />
This is a hint</div>
</body>
</html>

Open in new window

lightspeedvt

Here is the working code:

<SCRIPT language="javascript">
 function ShowHide(obj, xx){
            if (xx == 'condition') {
                obj.style.display = 'none';
            }
        }	
</SCRIPT>

<div onClick='ShowHide(this, "condition");'>
    Hello
</div>

Open in new window

Demo:
http://jsfiddle.net/BxuCq/