Greetings!

I am seeking assistance in refining the concept for a JQuery gallery that incorporates two filters. Currently, my approach involves utilizing the filters as class names and ids. When a user clicks on a filterable 'button' with an id, it triggers an action to be performed on all associated classes. While I can successfully filter each element individually, I face an issue when trying to select multiple filters simultaneously. My goal is to display only those cards that belong to both selected filters, excluding any others. Presently, even if a card belongs to just one filter, it still shows up.

Regarding the challenge of selecting multiple elements concurrently, I find myself at a loss. I am struggling to figure out how to streamline or "reduce" this code. Any innovative ideas on simplifying the code would be greatly appreciated as I continue to learn JQuery.

My current project involves designing and constructing a webpage featuring a JQuery gallery comprised of div containers, which I refer to as "cards." Each card contains a title, description, and more. Users can navigate through these cards by filtering based on category (competency) and day of the week, aiding them in selecting the most suitable option.

At present, I manually write out individual cases for each filter, which may not be the most efficient method but it gets the job done! However, I aspire to refine the functionality so that selecting filters from both categories results in showing only cards that meet both criteria. As mentioned earlier, currently, even if a card falls under just one filter, it remains visible.

In addition, I am constructing the page using Bootstrap.

HTML Setting Up 2 Filters

<!-- First Filter, by Category -->
    <div class="col-md-2 col-sm-2 col-xs-2">
      <img id="buttonAll" src="..."/>
    </div>
    <div class="col-md-2 col-sm-2 col-xs-2">
      <img id="button1" src="..."/>
    </div>
    <div class="col-md-2 col-sm-2 col-xs-2">
      <img id="button2" src="..."/>
    </div>
    <div class="col-md-2 col-sm-2 col-xs-2">
      <img id="button3" src="..."/>
    </div>
    <div class="col-md-2 col-sm-2 col-xs-2">
      <img id="button4" src="..."/>
    </div>

<!-- Second Filter, by Day -->    
      <p id="dayAll">Any Day</p>
      <p id="monday">Monday</p>
      <p id="tuesday">Monday</p>
      <p id="wednesday">Wednesday</p>
      <p id="thursday">Thursday</p>
      <p id="friday">Friday</p>

HTML A Card / Gallery Setup

<div class="container">
  <div class="row">
    <!-- START CLASS CARD -->
            <div class="class-card sort-button1 sort-button2 sort-button3 sort-button4 monday">
                <h1>Class Title</h1>
                <h3>Monday @ 3:00 PM</h3>
                <p>Develops:
                    <img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_1.jpg"/>
                    <img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
                    <img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_3.jpg"/>
                    <img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Care...

   <!-- START CLASS CARD -->
            <div class="class-card sort-button2 monday">
                <h1>Class Title</h1>
                <h3>Monday @ 12:00 PM</h3>
                <p>Develops:
                    <img class="tiny-button" src="https://sephora.csod.com/clientimg/sephora/welcome/20180106_Careerfest_Button_Tiny_2.jpg"/>
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique placerat erat, ut varius quam pulvinar eget. Ut mollis quam at maximus vulputate. Suspendisse posuere turpis eu accumsan tempor....               

JS Implementing Filter 1:

// Filter 1: by Day

// Show cards for all days of the week by default
$('.monday').show();
$('.tuesday').show();
$('.wednesday').show();
$('.thursday').show();
$('.friday').show();

// Actions upon clicking different day filters
$('#dayAll').click(function() {
    $('.monday').fadeIn();
    $('.tuesday').fadeIn();
    $('.wednesday').fadeIn();
    $('.thursday').fadeIn();
    $('.friday').fadeIn();
});

$('#monday').click(function() {
    // showing Monday cards while hiding others
    $('.tuesday, .wednesday, .thursday, .friday').fadeOut();
    $('.monday').fadeIn();
});

// For Tuesday filter
$('#tuesday').click(function() {
    // show Tuesday specific cards and hide others
    $('.monday, .wednesday, .thursday, .friday').fadeOut();
    $('.tuesday').fadeIn();
});

// Implementing similar logic for remaining days...
...

JS Implementing Filter 2:

// Filter 2: by Category (Competency) 

// Showing cards for all competency categories by default
$('.sort-button1').show();
$('.sort-button2').show();
$('.sort-button3').show();
$('.sort-button4').show();

// Handling actions after triggering different category filters
$('#buttonAll').click(function() {
    $('.sort-button1').fadeIn();
    $('.sort-button2').fadeIn();
    $('.sort-button3').fadeIn();
    $('.sort-button4').fadeIn();
});
// Additional filter actions for button1, button2, etc.
...

---

Feel free to explore the full project on CodePen.

As a beginner in JQuery programming, I acknowledge that the JS part could use some optimization. The iterative steps without loops or variables might appear rudimentary, but they serve their purpose for now. If you have suggestions on enhancing this aspect, I am all ears. Thank you for your input!!