CODEWITHSUNDEEP
jqueryhtml-listsshow-hide
Satinder singh
Satinder singh

Reputation: 10198

How to show/Hide for selected Li using Jquery

I have UL tag which contain Li with many classnames,
I want to show those Li whose classname are same and hide others.

Here the JSFiddle DEMO

For example here If i click class1 then "John,Michle,Alex" will be visible rest all have to hide

EDITED: Also Sort Li while hiding list

ANSWER:

By changing $(this).show(); to $(this).parent('Li').show(); solved my blank space problem :)

Upvotes: 2

Views: 1420

Answers (2)

SeinopSys
SeinopSys

Reputation: 8937

  1. Do not use .live(), it's deprecated
  2. Do not use .each(), it's unnecessary
$("ul.tagingUL li").on("click", function () {
    var className = $(this).attr('class');
    $('#emplistName ul li span.'+className).show();
    $('#emplistName ul li span:not(.'+className+')').hide();
});

JSFIDDLE

Upvotes: 1

varnie
varnie

Reputation: 2595

You made a simple error in your jsfiddle. Here's a fix.

I changed the line:

if ($('#emplistName Ul Li Span').hasClass(className) === true) {

to:

if ($(this).hasClass(className) === true) {

Upvotes: 1

Related Questions