• Locked
3 replies [Last post]
Mon, 2003-07-21 20:21
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 5 days ago
Brisbane
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
           ele.style.display="block";       
       }else{
           ele.style.display="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.

$('#showhide').hide();

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>

$('#toggle').click(function(){
  $('#showhide').toggle();
});

Top
Tags:
Wed, 2004-06-23 21:07
#1
mfriedrich
Offline
newbie
Last seen: 18 years 48 weeks ago
Joined: 2004-06-23
Posts: 1
Points: 0

css collapsable/expandable menu with hide option

http//simplythebest.net/scripts/DHTML_scripts/dhtml_script_3.html

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

Top
Wed, 2004-10-13 01:33
#2
capmexbiz
Offline
Regular
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

Top
Thu, 2004-10-21 06:28
#3
jackysee
Offline
newbie
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

Top
  • Locked