What's the best way to hide elements?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

What's the best way to hide elements?

Post by Luke »

I have a looooong list of categories on an ecommerce site I'm building... what's the best way to hide elements with javascript? I'm going to use scriptaculous to make the categories open/close, but what should I do to hide the categories initially? They are in this format, and unfortunately can't be altered too much due to the ecommerce solution we're using :(

Code: Select all

<div id="category_tree">
<ul>
<li class="cat"><a href="http://www.mysite.com?Category_Code=WK" class="cat">Work</a></li>
<li class="cat1"><a href="http://www.mysite.com?Category_Code=WK-OS" class="cat1">On Sale</a></li>
<li class="cat1"><a href="http://www.mysite.com?Category_Code=WK-AC" class="cat1">Accessories</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-AC-AB" class="cat2">Address Books</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-AC-AG" class="cat2">Agendas</a></li>

<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-AC-BC" class="cat2">Business Card Cases</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-AC-DA" class="cat2">Desk Accessories</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-AC-OR" class="cat2">Organizers</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-AC-OR-LE" class="cat3">Leather</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-AC-OR-FA" class="cat3">Fabric</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-AC-PB" class="cat2">Padfolios & Binders</a></li>
<li class="cat1"><a href="http://www.mysite.com?Category_Code=WK-BC" class="cat1">Briefcases</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-BC-AT" class="cat2">Attache</a></li>

<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-BC-CC" class="cat2">Catalog Case</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-BC-EX" class="cat2">Expandable</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-BC-FA" class="cat2">Fabric</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-BC-HS" class="cat2">Hardside</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-BC-LE" class="cat2">Leather</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-BC-PO" class="cat2">Portfolios</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-BC-RO" class="cat2">Rolling</a></li>
<li class="cat1"><a href="http://www.mysite.com?Category_Code=WK-HG" class="cat1">Handheld Gadgets</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-HG-PD" class="cat2">PDA Cases</a></li>

<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-HG-PD-FA" class="cat3">Fabric</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-HG-PD-LE" class="cat3">Leather</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-HG-PC" class="cat2">Phone Cases</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-HG-PC-FA" class="cat3">Fabric</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-HG-PC-LE" class="cat3">Leather</a></li>
<li class="cat1"><a href="http://www.mysite.com?Category_Code=WK-LB" class="cat1">Laptop Bags</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-LB-AC" class="cat2">Accessories</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-AC-CH" class="cat3">Cable Holders</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-AC-SE" class="cat3">Security</a></li>

<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-AC-ST" class="cat3">Straps</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-LB-BA" class="cat2">Backpacks</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-BA-BU" class="cat3">Business</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-BA-CA" class="cat3">Casual</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-BA-WH" class="cat3">Wheeled</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-LB-BR" class="cat2">Briefcases</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-BR-AT" class="cat3">Attatche</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-BR-CA" class="cat3">Casual</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-BR-EX" class="cat3">Expandable</a></li>

<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-BR-HS" class="cat3">HardSided</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-BR-LE" class="cat3">Leather</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-BR-WH" class="cat3">Wheeled</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-LB-MS" class="cat2">Messenger</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-MS-BU" class="cat3">Business</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-MS-CA" class="cat3">Casual</a></li>
<li class="cat2"><a href="http://www.mysite.com?Category_Code=WK-LB-SL" class="cat2">Sleeves</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-SL-17" class="cat3">17inch Sleeve</a></li>
<li class="cat3"><a href="http://www.mysite.com?Category_Code=WK-LB-SL-HO" class="cat3">Horizontal</a></li>

<!-- and so on... //-->
I only want to hide elements that aren't class "cat" for now.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

element.style.display = 'none' in many cases is most simple.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

the visibility property has all but been phased out IMHO. display is def the way to go.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

You may want to give jQuery a try, it uses CSS selectors to pick and choose the elements to work on.. an example relating to what you want would be (untested):

Code: Select all

$(document).ready (function(){
   //the dom is ready to manipulate
   $('#category_tree li:not(.cat)').hide(); //all LI's within #category_tree that dont have an class of #cat
});
It's smaller, and faster than prototype, and it's effects plugin is much quicker (and the animations are much more smooth)
Last edited by nickvd on Fri Oct 20, 2006 6:42 pm, edited 2 times in total.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

hmm... then why does this not work?

Code: Select all

function getElementsByClassName(node, classname)
{
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
function hideAll(parentId){
	
	var within = document.getElementById(parentId);
	var elements = getElementsByClassName(within, 'cat1');
	for(var i in elements){
		i.style.display = 'none';
	}
	
}
This sucks... I was just getting decent at PHP when I had to dive into javascript and be green again.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

nickvd wrote:You may want to give jQuery a try
thanks, I will.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I believe "i" in merely an index into the array of "elements"
Post Reply