Trier plusieurs div avec des classes

Question

J'ai donc une liste de div qui ont plusieurs classes attachées à chacun (mon surs s1 s2 chante voix ect.) Je veux mettre en place un système de filtrage qui permet aux utilisateurs de sélectionner une classe et masquer les autres. Ce serait génial de sélectionner plusieurs classes et montrer ce qui est sélectionné.

Mon HTML

<!-- Class Info --> 
<!-- Fliter Btn --> 
    <button class="clearBtn btn" id="clearBtn">Clear Filter</button> 
    <button class="filterBtn btn" id="filterBtn">Filter</button> 
    <!-- Fliter Btn --> 

    <!-- Fliter --> 
    <div class="container" id="filterBoxes"> 
    <div class="row " id="filterField"> 
     <div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
      <button id="actBtn" class="actBtn btn">Acting Classes</button> 
</div> 


<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="danceBtn" class="danceBtn btn">Dance Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="voiceBtn" class="voiceBtn btn">Voice Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="tchBtn" class="tchBtn btn">Tech Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="monBtn" class="monBtn btn">Monday Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="thursBtn" class="thursBtn btn">Thursday Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="s1Btn" class="s1Btn btn">Session 1 Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="s2Btn" class="s2Btn btn">Session 2 Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="g2-6Btn" class="g2-6Btn btn">Grade 2 - 6 Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="g7-12Btn" class="g7-12Btn btn">Grade 7 - 12 Classes</button> 
</div> 

    </div> 
    </div> 
    <!-- Fliter --> 


    <!-- Acting --> 
    <div class="container"> 
    <h3 class="classTitle acting">Acting Classes</h3> 
    <!--Class--> 
    <div class="row classes"> <!--Class--> 
    <div class="col-md-3 col-sm-3 acting g2-6 thurs s1 class" id="clown"> 
     <h4 class="className">Clowning Skills</h4> 
     <p class="classInfo">Grades 2 – 6<br />Thursdays Session 1</p> 
     <!-- course Discription --> 
    <div class="panel-group" id="accordion2" role="tablist" aria- 
     multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data- 
     toggle="collapse" data-parent="#accordion1" 
     href="#collapseOne2">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne2" class="panel-collapse collapse in 
      courseCollapse"> 
      <div class="panel-body"> 
      <p class="classDis">Are you always looking for ways to entertain 
     and amaze? Do you love to make people laugh? Add to your 
     hilarious skills each week as Ms Amy Arpan teaches you the tricks 
     of the trade, including juggling!</p> 
      </div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
    </div> 
    <!--Class--> 
    <div class="col-md-3 col-sm-3 acting g7-12 mon s2 class" id="improve1a"> 
    <h4 class="className">Improve 1A</h4> 
    <p class="classInfo">Grades 7 – 12<br />Mondays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion3" role="tablist" aria- 
    multiselectable="true" > 
     <div class="panel panelStyle"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data- 
    toggle="collapse" data-parent="#accordion1" href="#collapseOne3">Course 
    Description &amp; Prerequisite </a></h4> 
     </div> 
     <div id="collapseOne3" class="panel-collapse collapse in 
    courseCollapse"> 
      <div class="panel-body"> 
      <p class="classDis"> 
       Learn challenging improv games and take your comic timing to 
    the next level.</p> 
       <p><em>(Pre-req: All students must have at least one previous 
    show experience)</em></p> 
      </div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
    </div> 
<!--Class--> 
<div class="col-md-3 col-sm-3 acting g2-6 mon s2 class" id="improve1b"> 
    <h4 class="className">Improve 1B</h4> 
    <p class="classInfo">Grades 2 – 6<br />Mondays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion4" role="tablist" aria-multiselectable="true" > 
     <div class="panel panelStyle"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne4">Course Description &amp; Prerequisite </a></h4> 
     </div> 
     <div id="collapseOne4" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"> 
      <p class="classDis"> 
      Time to tickle the funny bone! This class is perfect for any young budding comic. Learn new short form improv games each week and start your path to comic genius.</p> 
      </div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div> 
<!--Class--> 
    </div><!-- acting classes section--> 
    </div><!-- acting container--> 

    <!-- Singing Classes --> 
    <h3 class="classTitle sing">Vocie Studio</h3> 
    <div class="container"> 
    <div class="row col-centered"> 
    <div class="col-md-3 col-sm-3 g7-12 mon s2 sing class" id="voice studio 1A"> 
    <h4 class="className">Voice Studio 1A</h4> 
    <p class="classInfo">Grades 7 – 12<br />Mondays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion5" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne5">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne5" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"> 
      <p class="classDis">Are you looking to learn proper singing technique or simply brush up on your vocal skills? The Voice Studio is the right class for you! Join our studio to practice good vocal habits, fundamental singing technique and understand how the vocal anatomy works to give you the best tone quality. You will be introduced to the art song and folk song genre.</p> 
      </div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
    </div> 
    <!--Class--> 
    <div class="col-md-3 col-sm-3 g2-6 mon s1 sing class" id="voiceStudio1b"> 
    <h4 class="className">Voice Studio 1B</h4> 
    <p class="classInfo">Grades 2 – 6<br />Mondays Session 1</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion6" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne6">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne6" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">Are you looking to learn proper singing technique or simply brush up on your vocal skills? The Voice Studio is the right class for you! Join our studio to practice good vocal habits, fundamental singing technique and understand how the vocal anatomy works to give you the best tone quality. You will be introduced to the art song and folk song genre.</p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
     <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
    </div><!-- Class--> 
    <!--Class--> 
    <div class="col-md-3 col-sm-3 g7-12 thurs s2 sing class" id="voiceStudio2b"> 
    <h4 class="className">Voice Studio 2B</h4> 
    <p class="classInfo">Grades 2 – 6<br />Thursdays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion7" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne7">Course Discription &amp; Prerequisite </a></h4> 
     </div> 
     <div id="collapseOne7" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">Continue your vocal journey and re-discover your voice in this next level of The Voice Studio. You will continue to develop your singing skills with an emphasis in tone quality and resonance. Students will expand their repertoire by adding music from the Broadway and jazz genres.</p> <p><em>(Students must take The Voice Studio 1A/1B, or audition, to be in this class.)</em></p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div><!-- Class--> 
<!--Class--> 
<div class="col-md-3 col-sm-3 g7-12 thurs s2 sing class" id="duets1a"> 
    <h4 class="className">Duets 1A</h4> 
    <p class="classInfo">Grades 7 – 12<br />Thursdays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion8" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne8">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne8" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">Do you love the harmonious sound of the Broadway duet? Would you like to feel confident singing with another person? This Duets class will be the perfect fit! Learn how to balance and blend with another singer and confidently sing harmonies. This is a skill that is critical to the musical theatre experience!</p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div><!-- Class--> 
</div> <!-- sing row ---> 
</div><!-- Sing contaner --> 




    <!-- Dance Classes --> 
    <h3 class="classTitle dance">Dance Classes</h3> 
<div class="container"> 
<div class="row col-centered"> 
<div class="col-md-3 col-sm-3 g7-12 mon s1 dance class" id="hiphop1a"> 
    <h4 class="className">Hip-Hop 1A</h4> 
    <p class="classInfo">Grades 7 – 12<br />Mondays Session 1</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion9" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne9">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne9" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"> 
      <p class="classDis">Hip hop is an urban street dance style that infuses breaking, popping, locking, b-boy, funk and jazz. This high energy class is for beginners in 7th- 12th grades.</p> 
      </div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div> 
<!--Class--> 
<div class="col-md-3 col-sm-3 g2-6 thurs s2 dance class" id="hipHop1b"> 
    <h4 class="className">Hip-Hop 1B</h4> 
    <p class="classInfo">Grades 2 – 6<br />Thursdays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion10" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne10">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne10" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">Hip hop is an urban street dance style that infuses breaking, popping, locking, b-boy, funk and jazz. This high energy class is for beginners in 2nd- 6th grades.</p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div><!-- Class--> 
<!--Class--> 
<div class="col-md-3 col-sm-3 g7-12 thurs s2 dance class" id="tapB1a"> 
    <h4 class="className">Tap Basics 1A</h4> 
    <p class="classInfo">Grades 7 – 12<br />Thursdays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion11" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne11">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne11" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">This class, open to students in grades 7th and up, is designed for the development of basic tap technique and terminology highlighting the importance of rhythm and sound. The class will focus on classic Broadway style tap dance. No prior tap experience is required. We will work to create a percussive instrument out of our feet. Purchase of tap shoes is required prior to start of class. Preferably a black tied tap shoe that can be picked up at any dance shoe store.</p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
<!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div><!-- Class--> 
<!--Class--> 
<div class="col-md-3 col-sm-3 g2-6 thurs s1 dance class" id="TapB1b"> 
    <h4 class="className">Tap Basics 1B</h4> 
    <p class="classInfo">Grades 2 – 6<br />Thursdays Session 1</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion12" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne12">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne12" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">This class, open to students in 2nd to 6th grades, is designed for the development of basic tap technique and terminology highlighting the importance of rhythm and sound. We will go slow in our exploration of beginner tap technique. The class will focus on classic Broadway style tap dance. We will work to create a percussive instrument out of our feet. Purchase of tap shoes is required prior to start of class. Preferably a black tied tap shoe that can be picked up at any dance shoe store.</p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div><!-- Class--> 
    <!--Class--> 
<div class="col-md-3 col-sm-3 g7-12 mon s2 dance class" id="Tap2a"> 
    <h4 class="className">Tap 2A</h4> 
    <p class="classInfo">Grades 7 – 12<br />Mondays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion13" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne13">Course Discription &amp; Prerequisite </a></h4> 
     </div> 
     <div id="collapseOne13" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">Tap 2A is an upper level tap class for those who completed Tap 1A. Tap is designed to develop rhythm, musicality, and coordination.</p> 
       <p><em>(Pre-req: Tap 1A, or Tap 1B and 6th grade placement, or a placement audition)</em></p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div><!-- Class--> 
    <!--Class--> 
<div class="col-md-3 col-sm-3 g7-12 mon s1 dance class" id="Tap2b"> 
    <h4 class="className">Tap 2B</h4> 
    <p class="classInfo">Grades 7 – 12<br />Mondays Session 1</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion14" role="tablist" aria- 
multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data- 
toggle="collapse" data-parent="#accordion1" href="#collapseOne14">Course 
Discription </a></h4> 
     </div> 
     <div id="collapseOne14" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">Tap 2B is an upper level tap class for those who completed Tap 1B. Tap is designed to develop rhythm, musicality, and coordination.</p><p><em> (Pre-req: Tap 1B or a placement audition)!</em></p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div><!-- Class--> 
</div> <!-- dance row ---> 
</div><!-- dance contaner --> 

Jquery

$('.actBtn').click(function(){ 
    // change btn color 

    $('#actBtn').removeClass('actBtn').addClass('btnSelect'); 
    // hide other classes  

     if($('.sing ,.tech ,.dance').hasClass('hidden')){ 
    $('.sing ,.tech ,.dance').removeClass('hidden');} 
    else {$('.sing ,.tech ,.dance').addClass('hidden');} 
    }); 
    $('.voiceBtn').click(function(){ 
     // change btn color 
     $('#voiceBtn').removeClass('voiceBtn').addClass('btnSelect'); 
// hide other classes  
     $('.acting ,.tech ,.dance').addClass('hidden'); 
}); 
$('.danceBtn').click(function(){ 
    // change btn color 
     $('#danceBtn').removeClass('danceBtn').addClass('btnSelect'); 
// hide other classes  
     $('.sing ,.tech ,.acting').addClass('hidden'); 
}); 
$('.tchBtn').click(function(){ 
    // change btn color 
     $('#tchBtn').removeClass('tchBtn').addClass('btnSelect'); 
// hide other classes  
     $('.sing ,.acting ,.dance').addClass('hidden'); 
}); 
$('.s1Btn').click(function(){ 
// change btn color 
     $('#s1Btn').removeClass('s1Btn').addClass('btnSelect'); 
// hide other classes  
     $('.s2').addClass('hidden'); 
}); 
$('.s2Btn').click(function(){ 
    // change btn color 
     $('#s2Btn').removeClass('s2Btn').addClass('btnSelect'); 
// hide other classes  
     $('.s1').addClass('hidden'); 
}); 
$('.monBtn').click(function(){ 
    // change btn color 
     $('#monBtn').removeClass('monBtn').addClass('btnSelect'); 
// hide other classes  
     if($('.thurs').hasClass('hidden')){ 
     $('.thurs').removeClass('hidden');} 
    else {$('.thurs').addClass('hidden');} 
}); 
$('.thursBtn').click(function(){ 
// change btn color 
     $('#thursBtn').removeClass('thursBtn').addClass('btnSelect'); 
// hide other classes  
     $('.mon').addClass('hidden'); 
    }); 
$('.g2-6Btn').click(function(){ 
// change btn color 
     $('#g2-6Btn').removeClass('g2-6Btn').addClass('btnSelect'); 
// hide other classes  
     $('.g7-12').addClass('hidden'); 
    }); 
$('.g7-12Btn').click(function(){ 
// change btn color 
     $('#g7-12Btn').removeClass('g7-12Btn').addClass('btnSelect'); 
// hide other classes  
    $('.g2-6').addClass('hidden'); 
    }); 

// Effacer Buttong Fonction

$('#clearBtn').click(function() { 
if($('#thursBtn').hasClass('btnSelect')){ 
     $('#thursBtn').removeClass('btnSelect').addClass('thursBtn');} 


if($('#monBtn').hasClass('btnSelect')){ 
     $('#monBtn').removeClass('btnSelect').addClass('monBtn');} 

if($('#actBtn').hasClass('btnSelect')){ 
     $('#actBtn').removeClass('btnSelect').addClass('actBtn');} 

if($('#voiceBtn').hasClass('btnSelect')){ 
     $('#voiceBtn').removeClass('btnSelect').addClass('voiceBtn');} 

if($('#danceBtn').hasClass('btnSelect')){ 
     $('#danceBtn').removeClass('btnSelect').addClass('danceBtn');} 

if($('#tchBtn').hasClass('btnSelect')){ 
     $('#tchBtn').removeClass('btnSelect').addClass('tchBtn');} 

if($('#s1Btn').hasClass('btnSelect')){ 
     $('#s1Btn').removeClass('btnSelect').addClass('s1Btn');} 

if($('#s2Btn').hasClass('btnSelect')){ 
     $('#s2Btn').removeClass('btnSelect').addClass('s2Btn');} 

    if ($('.acting').hasClass('hidden')) { 
    $('.acting').removeClass('hidden'); 
} 
    if ($('.sing').hasClass('hidden')) { 
    $('.sing').removeClass('hidden'); 
} 
    if ($('.s1').hasClass('hidden')) { 
    $('.s1').removeClass('hidden'); 
} 
    if ($('.s2').hasClass('hidden')) { 
    $('.s2').removeClass('hidden'); 
} 
    if ($('.tech').hasClass('hidden')) { 
    $('.tech').removeClass('hidden'); 
} 
    if ($('.dance').hasClass('hidden')) { 
    $('.dance').removeClass('hidden'); 
} 
    if ($('.mon').hasClass('hidden')) { 
    $('.mon').removeClass('hidden'); 
} 
    if ($('.thurs').hasClass('hidden')) { 
    $('.thurs').removeClass('hidden'); 
} 
    if ($('.g2-6').hasClass('hidden')) { 
    $('.g2-6').removeClass('hidden'); 
} 
    if ($('.g7-12').hasClass('hidden')) { 
    $('.g7-12').removeClass('hidden'); 
} 
}); 

Answer 1

Si je comprends bien, ce que vous voulez est que lorsque vous cliquez sur un bouton d'un filtre spécifique, il montrera/cache le div qui a ces classes, non? Considérant que c'est ce que vous voulez, faites attention à ce que vous voulez faire exactement la même chose avec chaque bouton, et la seule chose qui change est la liste des classes affectées pour chaque filtre, afin de simplifier le code dont nous avons vraiment besoin une fonction de clic associée à tous les boutons, et à l'intérieur de cette fonction nous obtiendrons cette liste.

Mon approche serait d'abord créer un objet qui a les relations entre chaque bouton et la liste des classes ...

var relations = { 
    actBtn: ['sing','tech','dance'], 
    voiceBtn: ['acting','tech','dance'], 
    danceBtn: ['sing','tech','acting'], 
    tchBtn: ['sing','acting','dance'], 
    ... 
}; 

... Je l'ai utilisé comme code pour chaque filtre les id vous J'utilise actuellement. Avec cela, vous pouvez créer une seule fonction pour gérer tous les boutons ...

$('button').not('#clearBtn,#filterBtn').click(function() { 

    // Change button color. 
    $(this).toggleClass($(this).attr('id')+' btnSelect'); 

    if ($('button.btnSelect').length > 0) { 

     // Hide all divs 
     $('div.class').hide(); 

     // Show divs of all active filters. 
     $('button.btnSelect').each(function() { 
      $('.'+relations[$(this).attr('id')].join(',.')).show(); 
     }); 
    } 
    else { 
     $('div.class').show(); 
    } 
}); 

Comme vous pouvez le voir, avec cette approche, vous pouvez réduire considérablement votre code. Pour afficher/masquer les comportements. Considérant que vous voulez pouvoir activer plusieurs filtres en même temps, et qu'ils peuvent partager une ou plusieurs classes, ce que j'ai fait est chaque fois que vous cliquez sur un filtre, d'abord masquer tous les divs et ensuite vérifier tous les filtres actifs leurs classes correspondantes, de sorte que vous n'avez pas à maintenir un état.

Et pour le bouton clair ...

$('button#clearBtn').click(function() { 

    // Deactivate all buttons. 
    $('button').removeClass('btnSelect').each(function() { 
     if (!$(this).hasClass($(this).attr('id'))) 
      $(this).addClass($(this).attr('id')); 
    }); 

    // Show all div's. 
    $('.'+filters.join(',.')).show(); 
}); 

Je ne comprends pas pourquoi vous ajoutez/retirer de la classe bouton lorsque vous cliquez dessus (en fait, je ne vois pas le point de ce class, vous avez déjà l'id avec la même valeur), je l'ai fait parce que vous l'avez et peut-être il a d'autres relations, mais je voudrais simplement ajouter/supprimer la classe btnSelect pour indiquer si le bouton est sélectionné ou non. Je ne vois pas non plus le point du bouton Filter. Je pense que vous n'en avez pas besoin avec cette approche.

Et il est facile de le modifier pour l'adapter à vos préférences, car vous ne traitez qu'une seule fonction.

J'espère que cela aide