World!
I need help refining the concept for a JQuery gallery with two filters.
Right now, my logic/approach is to use the filters as class names & ids. So, when someone clicks a filterable 'button' with an id, it will trigger an action to be taken on all associated classes. Now, I can filter each and it works good. BUT, when I select a filter from 1 AND 2, I want it to rule-out all other cards, even if they belong to one of the two filters. Only if the card belongs to BOTH filters should it show. Right now, even if it only belongs to one filter it shows.
In regards to selecting multiple elements at one time, I can't wrap my mind around it. I am confused how to "reduce" this code. If you have a great idea to help reduce the code, please share. I am still learning JQuery.
I am trying to design & build a webpage that features a JQuery gallery of div containers. I am calling these div containers, "cards". Each card stores a title, a blurb, etc... The user can browse cards by filtering the cards by category (competency) and day of the week. This will help the user pick the best card for them.
Right now, I manually write each case for the filter. It's probably not the most efficient way of writing this, but hey, it works! BUT, when I select a filter from 1 AND 2, I want it to rule-out all other cards, even if they belong to one of the two filters. Only if the card belongs to BOTH filters should it show. Right now, even if it only belongs to one filter it shows.
Also, I am building the page with Bootsrap.
HTML 2 Filter Setup
<!-- 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 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_Careerfest_Button_Tiny_4.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. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- 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. Donec ac tortor vitae libero hendrerit porttitor. Cras id vulputate turpis, ac tincidunt ante. Integer enim nulla, bibendum ut porta vel, pharetra id libero.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p>Hosted by: <strong>Mind Gym</strong></p>
</div><!-- end class-card -->
<!-- plus a bunch more cards -->
</div><!-- end row -->
</div><!-- end container -->
JS The filter 1, in effect
// Filter 1: by Day
// Show cards for all days of week by default
$('.monday').show();
$('.tuesday').show();
$('.wednesday').show();
$('.thursday').show();
$('.friday').show();
// When user clicks "View All" show cards for all days of week
$('#dayAll').click(function() {
$('.monday').fadeIn();
$('.tuesday').fadeIn();
$('.wednesday').fadeIn();
$('.thursday').fadeIn();
$('.friday').fadeIn();
$('.monday').fadeIn();
});
// When user clicks "Monday" show cards for Monday and hide others
$('#monday').click(function() {
$('.tuesday').fadeOut();
$('.wednesday').fadeOut();
$('.thursday').fadeOut();
$('.friday').fadeOut();
$('.monday').fadeIn();
});
// When user clicks "Tuesday" show cards for Tuesday and hide others
$('#tuesday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeIn();
$('.wednesday').fadeOut();
$('.thursday').fadeOut();
$('.friday').fadeOut();
});
// When user clicks "Wednesday" show cards for Wednesday and hide others
$('#wednesday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeOut();
$('.wednesday').fadeIn();
$('.thursday').fadeOut();
$('.friday').fadeOut();
});
// When user clicks "Thursday" show cards for Thursday and hide others
$('#thursday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeOut();
$('.wednesday').fadeOut();
$('.thursday').fadeIn();
$('.friday').fadeOut();
});
// When user clicks "Friday" show cards for Friday and hide others
$('#friday').click(function() {
$('.monday').fadeOut();
$('.tuesday').fadeOut();
$('.wednesday').fadeOut();
$('.thursday').fadeOut();
$('.friday').fadeIn();
});
JS The filter 2, in effect
// Filter 2: by Category (Competency)
// Show cards for all categories by default
$('.sort-button1').show();
$('.sort-button2').show();
$('.sort-button3').show();
$('.sort-button4').show();
// When user clicks "View All" show cards for all categories
$('#buttonAll').click(function() {
$('.sort-button1').fadeIn();
$('.sort-button2').fadeIn();
$('.sort-button3').fadeIn();
$('.sort-button4').fadeIn();
});
// When user clicks "button1" show cards for button1 and hide others
$('#button1').click(function() {
$('.sort-button2').fadeOut();
$('.sort-button3').fadeOut();
$('.sort-button4').fadeOut();
$('.sort-button1').fadeIn();
});
// When user clicks "button2" show cards for button2 and hide others
$('#button2').click(function() {
$('.sort-button1').fadeOut();
$('.sort-button3').fadeOut();
$('.sort-button4').fadeOut();
$('.sort-button2').fadeIn();
});
// When user clicks "button3" show cards for button3 and hide others
$('#button3').click(function() {
$('.sort-button1').fadeOut();
$('.sort-button2').fadeOut();
$('.sort-button4').fadeOut();
$('.sort-button3').fadeIn();
});
// When user clicks "button4" show cards for button4 and hide others
$('#button4').click(function() {
$('.sort-button1').fadeOut();
$('.sort-button2').fadeOut();
$('.sort-button3').fadeOut();
$('.sort-button4').fadeIn();
});
See the full project on CodePen.
I am still a beginner JQuery programmer, so, I can't fit all of my code in this article. Can you please look at my CodePen and view the rest of it?
You might laugh at what I have written for the JS part, because I wrote out step-by-step, no loops or variables. If this can be improved, I am open as well. The loops and variable just confuse me at this point. Thank you!!
showandfadeOutare jQuery methods. If you do not put()on the end of them to execute them, simply doing$(selector).showor$(selector).fadeOutwill do nothing. – Taplar$('.sort-button-1, .sort-button-2').fadeOut(). You can comma separate the different selectors in the string for a logical OR. – Taplar