...

View Full Version : Hide/Display DIV



andymc1989
08-28-2006, 09:26 PM
I'm trying to add a script to my site which will hide and display a DIV. I have managed to get it so that it can be removed, but I'm struggling to get it so it can be re added.

www.blueskullofdeath.com

It is the 2nd box under the banner.

Script so far...


function RemoveNode()
{
d = document.body;
d_nested = document.getElementById("indexheader");
throwaway_node = d.removeChild(d_nested);
}

HTML

<div id="removeindexheader"><a onclick="RemoveNode()">Remove &nbsp;</a></div>

If you could help me so you can hide and display the division. It would be much appreciated. Thanks.

Mr J
08-28-2006, 09:38 PM
Here' a simple way to toggle the display value of a div


<script type="text/Javascript">


function showHideNode(){
el=document.getElementById("removeindexheader")
if(el.style.display=="block"){
el.style.display="none"
}
else{
el.style.display="block"
}


}
</script>


<div id="removeindexheader" style="display:block">Hello World</div>

<a href="#null" onclick="showHideNode()">Show/Hide</a>

Bill Posters
08-28-2006, 09:56 PM
Imho, it's better to use the js to add or remove a className which hides the div. Then, specify the rule in the CSS, where the guts of presentational data belong.

e.g.

css

.hide {
display: none;
}

js

function showHideNode() {

var el = document.getElementById('removeindexheader');
el.className = (el.className == 'hide') ? '' : 'hide';

}

markup

<div id="removeindexheader">Hello World</div>



<a href="#" onclick="showHideNode(); return false;">Show/Hide</a>

The script can be made more robust to account for pre-existing class values on an element, but you should be able to get the gist from the basic code above.

andymc1989
08-28-2006, 09:58 PM
It worked. Thanks a lot :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum