CODEWITHSUNDEEP
jquery
toams7
toams7

Reputation: 71

Hide all divs of a class, show only those with additional class

I've got a list of DIVS (products on a storepage) width the class "chairdiv". I'd like to be able to filter the DIVS that have an additional class, here's an example:

<div class="chairdiv sold"></div>
<div class="chairdiv forsale"></div>
<div class="chairdiv forsale"></div>
<div class="chairdiv forsale"></div>
<div class="chairdiv sold"></div>
<div class="chairdiv forsale"></div>

By default the page would show all these divs, can I use javascript to hide all "chairdiv" divs except those with "sold" or "forsale" as an additional class?

I'm HTML/CSS proficient but I know very little javascript.

Thanks!

Upvotes: 0

Views: 454

Answers (3)

David Thomas
David Thomas

Reputation: 253486

My first thoughts:

$('.chairdiv').not('.sold, .forsale').hide();

JS Fiddle demo.

Edited in response to question from the OP:

can you tell me how to activate this function with HTML? For example, to show only <div class="chairdiv sold"></div>, what could i put here: <a href="(what here)">show sold chairs</a>

For this:

<a href="#" id="showChairsAndSold">Show chairs and sold</a>

$('#showChairsAndSold').click(
    function(e){
        e.preventDefault(); // prevents any default action
        $('.chairdiv').not('.sold, .forsale').hide();
    });

JS Fiddle demo.

References:

Upvotes: 3

WWW
WWW

Reputation: 9870

Since you specifically asked how to hide divs (in case you have other tags that may have the chairdiv class that you don't want to hide) (which I know sounds funny since "div" is in the class name, but you did ask specifically for divs):

$("div.chairdiv").not(".sold, .forsale").hide();

Upvotes: 0

MultiDev
MultiDev

Reputation: 10659

$(".chairdiv").filter('.sold, .forsale');

This takes all elements with "chardiv" class, then returns only those with classes "sold" or "forsale".

Upvotes: 0

Related Questions