Guide on how to show or hide divs using keyword filters

Question

Guide on how to show or hide divs using keyword filters

My webpage features various cards with different keywords:

<div class="item">
    <div class="hashtags">
        <span><a href="#">Technology</a></span>
        <span><a href="#">Innovation</a></span>
    </div>
</div>
<div class="item">
    <div class="hashtags">
        <span><a href="#">Healthcare</a></span>
        <span><a href="#">Cybersecurity</a></span>
    </div>
</div>

In addition, I have pills that can be toggled on/off:

<div class="hashtags">
    <span class="active"><a href="#">Healthcare</a></span>
    <span class="inactive"><a href="#">Technology</a></span>
    <span class="inactive"><a href="#">Innovation</a></span>
    <span class="inactive"><a href="#">Cybersecurity</a></span>
</div>

The goal is to click on a pill for "Healthcare", which then displays only the items containing "Healthcare" in their hashtag class, hiding all other items. I've been looking into how to filter/toggle content based on specific criteria, but haven't found a solution yet. Here's the JavaScript I have so far, which handles toggling the active/inactive classes of the pill styling:

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

I'm aware there are ways to search HTML and compare strings using JS or jQuery, but I'm unsure if that's the best approach. Any input or advice would be greatly appreciated. Thank you!

javascript jquery html css filter

Answer 1

Answer №1

Below is a comprehensive example with additional comments included within the code.

$('.hashtags > span').on('click', function(e) {
  e.preventDefault();
  // capturing the selected value
  var storedValue = $(this).text();
  // passing it to a function for processing
  highlightHashtag(storedValue);
});


var highlightHashtag = function(value) {
  // looping through each element
  $('.hashtags > span').each(function() {
    if($(this).text() !== value) {
      // setting non-matching elements as 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

Below is a comprehensive example with additional comments included within the code.

$('.hashtags > span').on('click', function(e) {
  e.preventDefault();
  // capturing the selected value
  var storedValue = $(this).text();
  // passing it to a function for processing
  highlightHashtag(storedValue);
});


var highlightHashtag = function(value) {
  // looping through each element
  $('.hashtags > span').each(function() {
    if($(this).text() !== value) {
      // setting non-matching elements as 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 3

Answer №2

Personally, I believe it enhances the structure of your HTML if you incorporate some custom tags. Have a look at this quick example:

Custom attributes like data-something can prove to be quite beneficial within your HTML code.

CSS serves to highlight which classes are associated with specific objects.

Feel free to experiment with the code below or check it out on JSFiddle here:

$('.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 4

Personally, I believe it enhances the structure of your HTML if you incorporate some custom tags. Have a look at this quick example:

Custom attributes like data-something can prove to be quite beneficial within your HTML code.

CSS serves to highlight which classes are associated with specific objects.

Feel free to experiment with the code below or check it out on JSFiddle here:

$('.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 5

Answer №3

After carefully reviewing your query, here is the recommended course of action: start by concealing all the elements marked with .items, then reveal only those items bearing a hashtag that matches your selected text.

ULTIMATE RESOLUTION

$('.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);
            //identify and display items containing a link with the active hashtag
            if(i.find('.hashtags>span>a:contains(\'' + t + '\')').length > 0) {
                i.show();
            }
        });
    });
});

Answer 6

After carefully reviewing your query, here is the recommended course of action: start by concealing all the elements marked with .items, then reveal only those items bearing a hashtag that matches your selected text.

ULTIMATE RESOLUTION

$('.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);
            //identify and display items containing a link with the active hashtag
            if(i.find('.hashtags>span>a:contains(\'' + t + '\')').length > 0) {
                i.show();
            }
        });
    });
});

Guide on how to show or hide divs using keyword filters

Answer №1

Answer №2

Answer №3

Similar questions

Text in anchor vertically centered across browsers

Adjusting an item according to a specified pathway

Transforming timestamps to month day, year format and back again without the use of any NPM packages

Creating an Image Slideshow on Your Website

Get information from one div and implement it in a different div

Is there a way to set columns as initially hidden in MaterialTable?

Tips for showcasing images within buttons in HTML

How to retrieve the current event handler's value with jQuery

Leveraging Enjoyhint within nextJS

Using JavaScript to display a line using `document.write`

What is the process for importing a file with an .mts extension in a CJS-first project?

What is the preferred choice: using camelCase in CSS with Styled Components or Emotion for standard React development?

Ways to sort data based on dropdown selection in MVC Razor

Directive in Angular for customer management with filtering and sorting functionality

What are some ways to implement querySelectorAll in conjunction with htmx?

I am interested in implementing unique custom designs for the labels on highchart plotlines

Utilizing Bootstrap exclusively within a designated container div

Sortable jQuery div designed to resemble a chessboard

Python and JavaScript fundamental interaction

Pause the loading of information for a brief 2-second interval using jQuery's ajax feature