Page 1 of 1

What's the best way to hide elements?

Posted: Fri Oct 20, 2006 6:15 pm
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.

Posted: Fri Oct 20, 2006 6:17 pm
by feyd
element.style.display = 'none' in many cases is most simple.

Posted: Fri Oct 20, 2006 6:28 pm
by Burrito
the visibility property has all but been phased out IMHO. display is def the way to go.

Posted: Fri Oct 20, 2006 6:37 pm
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)

Posted: Fri Oct 20, 2006 6:40 pm
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.

Posted: Fri Oct 20, 2006 6:42 pm
by Luke
nickvd wrote:You may want to give jQuery a try
thanks, I will.

Posted: Fri Oct 20, 2006 10:08 pm
by feyd
I believe "i" in merely an index into the array of "elements"