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

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 2

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>

Answer 3

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>