How to toggle visibility of divs based on keyword filters

Question

I have this HTML of some cards that contain different keywords:

<div class="item">
    <div class="hashtags">
        <span><a href="#">Healthcare</a></span>
        <span><a href="#">Mobility</a></span>
    </div>
</div>
<div class="item">
    <div class="hashtags">
        <span><a href="#">Finance</a></span>
        <span><a href="#">Mobility</a></span>
    </div>
</div>

...and this HTML of some pills that can be toggled on/off:

<div class="hashtags">
    <span class="active"><a href="#">Finance</a></span>
    <span class="inactive"><a href="#">Healthcare</a></span>
    <span class="inactive"><a href="#">Managed Services</a></span>
    <span class="inactive"><a href="#">Mobility</a></span>
</div>

The idea is to be able to click on a pill for "Finance", and only those items that contain "Finance" in their hashtag class will be displayed, and all other items are hidden. I've tried searching for how to filter/toggle based on content, but can't seem to find anything yet. Here's my JS so far, which only toggles the active/inactive classes of the pill styling:

    $('.hashtags>span').click(function() {
    $(this).toggleClass('inactive');
    $(this).toggleClass('active');
    });

I know there's a way to lookup HTML and compare strings in JS or jQuery...but not sure that's the best approach. Any advice is appreciated. Thanks very much!

Answer 1

Here you are a complete example. I add comments to code

 $('.hashtags > span').on('click', function(e) { e.preventDefault(); // first we store value var storedValue = $(this).text(); // send it to a function highlightHashtag(storedValue); }); var highlightHashtag = function(value) { // iterate through all $('.hashtags > span').each(function() { if($(this).text() !== value) { // if doesnt match, inactive $(this).removeClass('active'); $(this).addClass('inactive'); } else { $(this).removeClass('inactive'); $(this).addClass('active'); } }); }; 

 .active { background-color:green; } .inactive { background-color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="item"> <div class="hashtags"> <span><a href="#">Healthcare</a></span> <span><a href="#">Mobility</a></span> </div> </div> <div class="item"> <div class="hashtags"> <span><a href="#">Finance</a></span> <span><a href="#">Mobility</a></span> </div> </div> 

Answer 2

i think i understand you question, first of all, hide all .items, then show all .items with a hashtag containing the text you are selected. like this (untested)

FINAL SOLUTION

$('.hashtags>span').unbind('click').click(function() {
    var text = $(this)
            .toggleClass('inactive')
            .toggleClass('active');
    var items = $('.item').hide();
    $('.hashtags>span.active').each(function(){
        var t = $(this).find('a:first').text() ;
        items.each(function(){
            var i = $(this);
            //find all items containing a a with the activated hashtag text
            if(i.find('.hashtags>span>a:contains(\'' + t + '\')').length > 0) {
                i.show();
            }
        });
    });
});

Answer 3

In my opinion is better if you add some custom tag into you html. Look at my quick example:

In the html you can add some custom attributes like data-something that can be really usefull.

CSS only highlight which class is on which object

You can try my code down here or look at it on JSFiddle https://jsfiddle.net/w19ytk8p/

 $('.hashtags>span').click(function() { $(this).toggleClass('inactive'); $(this).toggleClass('active'); var tag = $(this).attr("data-tag"); var related = []; $('.hashtags').each(function(index){ $(this).children( "span" ).removeClass("active"); $(this).children( "span" ).addClass("inactive"); if($(this).attr("data-tag") !== undefined && $(this).attr("data-tag").indexOf(tag)>-1) {related.push(this);} }); $(related).each(function(){ $(this).children( "span" ).removeClass("inactive"); $(this).children( "span" ).addClass("active"); }); }); 

 .inactive > a{ color: red; } .active > a{ color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item"> <div class="hashtags" data-tag="healthcare finance"> <span><a href="#">Healthcare</a></span> <span><a href="#">Mobility</a></span> </div> </div> <div class="item"> <div class="hashtags" data-tag="finance mobility"> <span><a href="#">Finance</a></span> <span><a href="#">Mobility</a></span> </div> </div> <div class="hashtags"> <span class="active" data-tag="finance"><a href="#">Finance</a></span> <span class="inactive" data-tag="healthcare"><a href="#">Healthcare</a></span> <span class="inactive" data-tag="managedServices"><a href="#">Managed Services</a></span> <span class="inactive" data-tag="mobility"><a href="#">Mobility</a></span> </div>