Posted By

mikemetcalf on 10/12/09


list content nav swap

Versions (?)

Who likes this?

2 people have marked this snippet as a favorite


Content Swap

 / Published in: jQuery

What it does: Takes a navigation, and swaps out corresponding content dynamically. It will automatically assign an .active class to the active list item, and unhide the first hidden div.

How it works: Add '.swap' to the navigation ul. Add a '.hidden' class to each one of the corresponding divs

  1. $('ul.swap li:first-child').addClass('active');
  2. $('div.hidden:eq(0)').show();
  3. $('ul.swap a').click(function(){
  4. var $this = $(this);
  5. $('ul.swap li').removeClass('active');
  6. $('div.hidden').hide();
  7. $($this.attr('href')).fadeIn();
  8. $this.parent().addClass('active');
  9. return false;
  10. });

Report this snippet  

You need to login to post a comment.