Motyar

@motyar

Freelance Web Developer

Static Web Hosting, made easy

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-size: 11px;
         color: #6E724E;
         padding: 2px 5px;
         border: 1px solid #D7D999;
         background: #FFFFC6;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;        
        cursor: pointer;
  }
 #demos .tags span:hover,
 #demos .tags span.selected {
        border: 1px 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 :