- jQuery - show/hide DIVs is they have a certain class
- <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>
- function showOnlyCat(className){}
- function showOnlyCat(className){
- $("#principal").children().hide().filter("."+className).show();
- }
- function showAllCat(){
- $("#principal").children().show();
- }
- function showAllCat() {
- $('#principal div').each(function() {
- $(this).css('display', 'block');
- })
- }
- function showOnlyCat(className) {
- $('#principal div:not(.' + className + ')').each(function() {
- $(this).css('display', 'none');
- })
- $('#principal div.' + className).each(function() {
- $(this).css('display', 'block');
- })
- }
- //other way:
- function showOnlyCat1(className) {
- //hide all
- $('#principal div').each(function() {
- $(this).css('display', 'none');
- })
- //showing only class parameter
- $('#principal div.' + className).each(function() {
- $(this).css('display', 'block');
- })
- }