3 replies [Last post]
Tony's picture
Last seen: 2 weeks 5 days ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

To hide elements using CSS you can set display to none or visibility to hidden.
The difference is that with display:none the element is not on the page, where as with visibility:hidden the area is reserved for the element, so the space where the element would be if it was visible is still there, just empty.

Below is a DOM, JavaScript function that will display or hide a element given it's ID.

function showorhide(id){
   if(document.getElementById(id)){    //check the element exists and can be accessed
       var ele = document.getElementById(id);    //get hold of the element
       if(ele.style.display=="none"){   //see if display property is set to none

<div id="showhide">Show or hide</div>
<a id="toggle" onclick="showorhide('showhide')">Toggle it</a>

With jQuery it's simple to target any element and hide it.


Or if you wish to toggle between show and hide:
<div id="showhide">Show or hide with jQuery toggle</div>
<a id="toggle">Toggle it</a>


Last seen: 18 years 48 weeks ago
Joined: 2004-06-23
Posts: 1
Points: 0

css collapsable/expandable menu with hide option


I'm playing around with the script from the above link. Does anyone know how to modify this so when a selection is made from the sublinks, the main link and all the subs within that category remain expanded? In other words, If [choice 0] is selected and then -sub 1, when on page for sub 1, I'd like all the [choice 1] to remain open, not collapse. Any help would be greatly appreciated. lol

Last seen: 18 years 34 weeks ago
Joined: 2004-09-29
Posts: 14
Points: 0

Hiding things

display:none is specially useful to create accessible websites.

Webmaster Resources for Business Websites

Last seen: 18 years 31 weeks ago
Joined: 2004-10-21
Posts: 1
Points: 0

A reference site

Here is the code I read from others, very much the same as the first post's but it accepts multiple ids:

function expandCollapse() {
    for (var i=0; i<expandCollapse.arguments.length; i++) {
        var element = document.getElementById(expandCollapse.arguments[i]);
        element.style.display = (element.style.display == "none") ? "block" : "none";

There are some other cool little javascripts too.
Read here: http://www.blakems.com/archives/000087.htm