Hide elements by click by data-attribute

Question

I want to do some filter by jQuery This is my HTML

<ul id="filters" class="filter nav nav-pills">
      <li><a class="filter_link" href="#" data-category="7">Shop</a></li>
      <li><a class="filter_link" href="#" data-category="8">Portal</a></li>
      <li><a class="filter_link" href="#" data-category="9">Website</a></li>
</ul>

<div class="col-lg-3 filter_div" data-postcat="9">
   some html
</div>

<div class="col-lg-3 filter_div" data-postcat="8">
   some html
</div>

and this is my JS

jQuery(document).on('click', '.filter_link', function() {
    var catId = jQuery(this).data("category");
    jQuery('.filter_div').each(function(i, el) {
        var termId = jQuery(el).data('postcat');

    });
});

i can`t understand how i can hide and show elements by click if i click on ul > li > a with attribute for example 8. i want hide all divs with data-category not 8

with .data in alert(catId) i see my current number. I `am interesting how hide DIVs with this number in data-postcat=catId — user3484506
– user3484506, Commented Aug 26, 2014 at 9:51

Arun P Johny · Accepted Answer · 2014-08-26 09:51:25Z

1

You can use the attribute selector

jQuery(document).on('click', '.filter_link', function() {
    var catId = jQuery(this).data("category");
    //use attribute selector to find the items to be shown
    var $targets = jQuery('.filter_div[data-postcat="'+catId+'"]').show();
    //hide all the other items
    jQuery('.filter_div').not($targets).hide();
});

Demo: Fiddle

answered Aug 26, 2014 at 9:51

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Awlad Liton · Accepted Answer · 2014-08-26 09:58:03Z

0

You can do it like this:

$(document).on('click', '.filter_link', function() {
    var catId = $(this).data("category");
     //hide all div
    $('.filter_div').hide();
    //show only specific div
    $(".filter_div[data-postcat='" + catId +"']").show();

});

fiddle

answered Aug 26, 2014 at 9:58

Awlad Liton

9,3513 gold badges30 silver badges53 bronze badges

Comments

pomeh · Accepted Answer · 2014-08-26 09:59:32Z

You have to filter the list using the jQuery attribute selector:

JavaScript

function showCategory(categoryId) {
    var $allDivs = jQuery('.filter_div[data-postcat]');
    var $selectedDiv = $allDivs.filter('[data-postcat='+categoryId+']');

    $allDivs.hide();
    $selectedDiv.show();
}

jQuery(document).on('click', '.filter_link', function(event) {
    var categoryId = event.target.getAttribute('data-category');

    showCategory(categoryId);

    event.preventDefault();
});

HTML

<ul>
      <li><a class="filter_link" href="#" data-category="7">Shop</a></li>
      <li><a class="filter_link" href="#" data-category="8">Portal</a></li>
      <li><a class="filter_link" href="#" data-category="9">Website</a></li>
</ul>

<div class="filter_div" data-postcat="9">
   category 9
</div>

<div class="filter_div" data-postcat="8">
   category 8
</div>

Here is a working JSFiddle for this: http://jsfiddle.net/pomeh/e04kxbhc/

Collectives™ on Stack Overflow

Hide elements by click by data-attribute

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related