Posted By

conspirator on 04/29/09


Tagged

list jquery filter portfolio filterable


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

benrudolph
vali29
marvin_speakman
ahmedalttai


jQuery Filterable Portfolio


 / Published in: jQuery
 

URL: http://nettuts.s3.amazonaws.com/196_jquery/index.htm

This is how NetTuts does their filterable Portfolio.

  1. $(document).ready(function() {
  2. $('ul#filter a').click(function() {
  3. $(this).css('outline','none');
  4. $('ul#filter .current').removeClass('current');
  5. $(this).parent().addClass('current');
  6.  
  7. var filterVal = $(this).text().toLowerCase().replace(' ','-');
  8.  
  9. if(filterVal == 'all') {
  10. $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
  11. } else {
  12.  
  13. $('ul#portfolio li').each(function() {
  14. if(!$(this).hasClass(filterVal)) {
  15. $(this).fadeOut('normal').addClass('hidden');
  16. } else {
  17. $(this).fadeIn('slow').removeClass('hidden');
  18. }
  19. });
  20. }
  21.  
  22. return false;
  23. });
  24. });

Report this snippet  

You need to login to post a comment.