Jquery - hide all div except one class

Question

Here is my code:

<div id="principal" class="classxx"> <div class="class001 cat2 blabla"> <div class="class002"> <div class="class003"></div> <div class="class004"></div> <div class="class005"></div> </div> </div> <div class="class001 cat3 blabla"> <div class="class002"> <div class="class003"></div> <div class="class004"></div> <div class="class005"></div> </div> </div> <div class="class001 cat1 blabla"> <div class="class002"> <div class="class003"></div> <div class="class004"></div> <div class="class005"></div> </div> </div> </div> 

I need a function like:

 function showOnlyCat(className){} 

If I call showOnlyCat('cat3') , I want to see only all DIVs that have the class “cat3” (each DIV has several classes) and its children, of course

And I also need showAllCat() , which shows all cat1, cat2, cat3 ... DIVs

Thank you very much for your help

Answer 1

try the following:

 function showOnlyCat(cat) { $('div').not('.'+cat).hide(); } function showAllCat() { $('div').show(); } 

Answer 2

 $('div.cat').siblings().show(); 

And all brothers and sisters with the above will be shown.

Answer 3

 function showOnlyCat(cat){ $('.class001').hide(); $('.'+ cat).show(); } function showAllCat(){ $('.class001').show(); } 

This is true if class001 is right.

Answer 4

 function showOnlyCat(className) { $('div').not('.' + className).hide(); } function showAllCat() { for (i=1;i<=NUM_CAT;i++) { $('.cat' + i).show(); } } 

Answer 5

Can be achieved with a single function really

 function toggleVisibility(className){ if(typeof(className)!='undefined' && className != null){ $("div").hide(); $("div."+className).show(); } else $("div").show(); } 

// show only class001 toggleVisibilty ('class001'); // show all toggleVisibility ();