@motyar

I'm Motyar, an entrepreneur and API developer from India

Creating value through Programming

DigitalOcean Cloud hosting for developers
20GB SSD, 512MB RAM - only $5 per month

Jul 13, 2010

Jquery Data Filter : Toggle jquery filter

I am writing this post after facing a lot of problems related to "filtering data with Jquery". After all i have created a cool "Toggle jquery filter" that works on categories or tags (Its an OR filter)

Idea

Problems create solutions, same like all my other blog posts this also came from my experience with real problem, and as i promised you; i am sharing the solution this with you.

Code

CSS

 #demos .tags span {
         font-size11px;
         color#6E724E;
         padding2px 5px;
         border1px solid #D7D999;
         background#FFFFC6;
        -moz-border-radius10px;
        -webkit-border-radius10px;
        border-radius10px;        
        cursorpointer;
  }
 #demos .tags span:hover,
 #demos .tags span.selected {
        border1px solid #75784C;
        background#FF7;          
        color#333521;
  } 


JavaScript / Jquery

 $('tr span').click(function() {
                  var  = $(this), 
                  tag = .text(),
                  type = .closest('td')
                           .attr('class');

                if (.is('.selected')) {
                    $('.' type 
                    ' span:contains(' tag ')')
                       .removeClass('selected');               
               } else {
                    $('.' type  
                   ' span:contains(' tag ')')
                      .addClass('selected');
                }


                // Show / hide game is here
                var  = $('.' type ':has(span.selected)')
                      .closest('tr');
                if (.length) {
                    $('tr').hide();
                    .show();
                } else {
                    $('tr').show();

                }

            }); 


Demo

Again its time to a test drive, the working demo is here.

Download

You can download this code here.

Labels: ,


By :