Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Jun 30th, 2012  |  syntax: None  |  size: 1.55 KB  |  hits: 14  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. jQuery - show/hide DIVs is they have a certain class
  2. <div id="principal" class="classxx">
  3.     <div class="class001 cat2 blabla">
  4.       <div class="class002">
  5.         <div class="class003"></div>
  6.         <div class="class004"></div>
  7.         <div class="class005"></div>
  8.       </div>
  9.     </div>
  10.     <div class="class001 cat3 blabla">
  11.       <div class="class002">
  12.         <div class="class003"></div>
  13.         <div class="class004"></div>
  14.         <div class="class005"></div>
  15.       </div>
  16.     </div>
  17.     <div class="class001 cat1 blabla">
  18.       <div class="class002">
  19.         <div class="class003"></div>
  20.         <div class="class004"></div>
  21.         <div class="class005"></div>
  22.       </div>
  23.     </div>
  24.   </div>
  25.        
  26. function showOnlyCat(className){}
  27.        
  28. function showOnlyCat(className){
  29.  $("#principal").children().hide().filter("."+className).show();
  30. }
  31.  
  32. function showAllCat(){
  33.  $("#principal").children().show();
  34. }
  35.        
  36. function showAllCat() {
  37.     $('#principal div').each(function() {
  38.         $(this).css('display', 'block');
  39.     })
  40. }
  41.  
  42. function showOnlyCat(className) {
  43.     $('#principal div:not(.' + className + ')').each(function() {
  44.         $(this).css('display', 'none');
  45.     })
  46.  
  47.     $('#principal div.' + className).each(function() {
  48.         $(this).css('display', 'block');
  49.     })
  50. }
  51.  
  52. //other way:
  53. function showOnlyCat1(className) {
  54.     //hide all
  55.     $('#principal div').each(function() {
  56.         $(this).css('display', 'none');
  57.     })
  58.     //showing only class parameter
  59.     $('#principal div.' + className).each(function() {
  60.         $(this).css('display', 'block');
  61.     })
  62. }