Toggle the visibility of divs using jQuery for easy filtering

Question

Toggle the visibility of divs using jQuery for easy filtering

I am looking to enhance my filtering system by allowing users to apply and view multiple filters simultaneously. For example, I want to be able to select 'High' and 'pizza' filters and see the results that match both criteria. Currently, the system only allows for switching between filters and displaying results based on the single filter selected.

https://jsfiddle.net/f7srx0dd/

<div class="nav">
<a href="#" data-category-type="high">high</a>

<a href="#" data-category-type="low" data-category-name="air">low</a>

<a href="#" data-category-name="pizza">pizza</a>

</div>
<div id="Categories">
    <div class="hide" data-category-type="high" data-category-  name="pizza">high</div>
    <div class="hide" data-category-type="low" data-category-name="pasta">low</div>
    <div class="hide" data-category-type="low" data-category-name="pizza">low</div>
    <div class="hide" data-category-type="high" data-category-name="pasta">high</div>
</div>

$('.nav a').on('click', function (e) {
e.preventDefault();
var cat = $(this).data('categoryType');
var nam = $(this).data('categoryName');
$('#Categories > div').hide();
$('#Categories > div[data-category-type="'+cat+'"]').show();
$('#Categories > div[data-category-name="'+nam+'"]').show();

});

javascript jquery html css

Answer 1

Answer №1

Your approach needs tweaking. Using $(this) won't fetch both the category and name at once.

When using the click function, $(this) only refers to the clicked element. In your scenario, the same element may not contain information for both the category and name.

Therefore, you should either update your HTML to include both data attributes in all anchor tags or adjust your function to fetch the category and name from a reliable source.

I'll provide a sample to clarify further.

This is an example with updated HTML where anchors have both data attributes:

<a href="#" data-category-type="high"  data-category-name="pizza">High and pizza</a>

https://jsfiddle.net/f7srx0dd/4/

Here's another example with updated javascript:

https://jsfiddle.net/f7srx0dd/5/

I hope you find these solutions helpful!

Answer 2

Your approach needs tweaking. Using $(this) won't fetch both the category and name at once.

When using the click function, $(this) only refers to the clicked element. In your scenario, the same element may not contain information for both the category and name.

Therefore, you should either update your HTML to include both data attributes in all anchor tags or adjust your function to fetch the category and name from a reliable source.

I'll provide a sample to clarify further.

This is an example with updated HTML where anchors have both data attributes:

<a href="#" data-category-type="high"  data-category-name="pizza">High and pizza</a>

https://jsfiddle.net/f7srx0dd/4/

Here's another example with updated javascript:

https://jsfiddle.net/f7srx0dd/5/

I hope you find these solutions helpful!

Answer 3

Answer №2

To keep track of which buttons you have selected, it is important to set up an on and off state for them. You can achieve this by adding a click event that toggles the 'selected' class on and off like so:

if ($this.hasClass('selected')) {
    $this.removeClass('selected');
} else {
    $this.addClass('selected');
}

After implementing this logic, you can loop through the links to display the selected ones.

I have made the necessary adjustments in your fiddle: https://jsfiddle.net/f7srx0dd/2/

Answer 4

To keep track of which buttons you have selected, it is important to set up an on and off state for them. You can achieve this by adding a click event that toggles the 'selected' class on and off like so:

if ($this.hasClass('selected')) {
    $this.removeClass('selected');
} else {
    $this.addClass('selected');
}

After implementing this logic, you can loop through the links to display the selected ones.

I have made the necessary adjustments in your fiddle: https://jsfiddle.net/f7srx0dd/2/

Answer 5

Answer №3

When dealing with multiple filters, you can switch a class every time you click on a link. Keep in mind that this method works best with buttons rather than links, but for the sake of matching your HTML, we will use links.

$('.nav a').on('click', function (e) {
  $(this).toggleClass('active');
  $('#Categories > div').hide();

  $('.active').each(function() {
    var cat= $(this).data('categoryType');
    var nam= $(this).data('categoryName');
    $('#Categories > div[data-category-type="'+cat+'"]').show();
    $('#Categories > div[data-category-name="'+nam+'"]').show();
  });
});

This snippet of code toggles the class named active and goes through each selected item's categoryType and categoryName to decide what should be included in the filter.

Fiddle

Answer 6

When dealing with multiple filters, you can switch a class every time you click on a link. Keep in mind that this method works best with buttons rather than links, but for the sake of matching your HTML, we will use links.

$('.nav a').on('click', function (e) {
  $(this).toggleClass('active');
  $('#Categories > div').hide();

  $('.active').each(function() {
    var cat= $(this).data('categoryType');
    var nam= $(this).data('categoryName');
    $('#Categories > div[data-category-type="'+cat+'"]').show();
    $('#Categories > div[data-category-name="'+nam+'"]').show();
  });
});

This snippet of code toggles the class named active and goes through each selected item's categoryType and categoryName to decide what should be included in the filter.

Fiddle

Toggle the visibility of divs using jQuery for easy filtering

Answer №1

Answer №2

Answer №3

Similar questions

An issue is encountered with the JavascriptExecutor while attempting to navigate to a different page using Selenium Webdriver

Sending an Ajax request to the MVC Controller results in a response of "NOT FOUND"

Storing a JavaScript variable into a JSON file to preserve data

Retrieving the text from the img tag of a bs4.element.Tag

Utilizing AngularJS routes to load a specific URL when accessing a page for the first time

Unable to dynamically load a script located in the node_modules directory

What is the reason for the malfunction of native one-time binding when using the `::` expression in Angular version 1.3.5?

The optimization of paths in Gulp with Browsersync

Exploring the mern.io scaffolder tool - Unraveling the essence of the .need method

Add a personalized class to a mat-tab within a mat-tab-group

Code not displaying message in Console using jQuery each() function

The columns in the row are not fully filling up the container

Unusual images emerge following certain elements in this unique gallery

Using jQuery to remove the functionality of a file input button is ineffective

Tips for adding an array to a formData: incorporating an array with two values along with their corresponding keys

Utilizing JQuery to send both files and text data via ajax请求

Pagination with Ajax functionality integrated within jQuery tabs

Conceal the block quotes while substituting with a newline

Utilizing Boolean Operators in JavaScript with Thymeleaf: A Guide

Where should uploaded files be stored using ng-flow?