advanced code snippet search

Posted By

amandalaine on 07/08/11


Tagged

simple tabs


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

jillella


Simple Tabs

 / Published in: jQuery
 

The following jquery presumes HTML involving: (contains divs of each tab) (contains divs of each content)

Expand | Embed | Plain Text 
  1. $(document).ready(function() {
  2. 		// hide all tabbed content other than the first or active div
  3. 		$("#tabbed_content > div").not(".active").hide();
  4.  
  5. 		// when user clicks a tab, display the corresponding content
  6. 		$("#tabs > div").click(function() {
  7. 			var tab_selected = $(this).index()
  8. 			$("#tabs > div").removeClass("active")
  9. 			$(this).addClass("active")
  10. 			$("#tabbed_content > div")
  11. 				.hide()
  12. 				.removeClass("active")
  13. 			$("#tabbed_content > div:eq("+tab_selected+")")
  14. 				.show()
  15. 				.addClass("active")
  16. 		})
  17. 	})

Report this snippet  

You need to login to post a comment.