Advanced Search

Basic Jquery Expander

/ Published in: JavaScript
Save to your folder(s)
Very basic accordion effect
Common structure would be an ID'd UL, and each LI to have a first child with the class of head
Shows and hides siblings of .head, attaches ID of expanded to current element

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $.fn.expander = function() {
  2. 	$('.head', this).css("cursor","pointer");
  3. 	$('.head', this).siblings().hide();
  4.     var expandedid = 'expanded';
  5.     $('.head', this).bind('click', function() {
  6.     	$('#' + expandedid + ' .head').siblings().hide('slow');
  7. 		var currentid = $(this).parent().attr('id');
  8. 		$('#' + expandedid).attr({id: ''});
  9. 		if(currentid !== expandedid) {
  10. 			$(this).siblings().show('slow');
  11. 			$(this).parent().attr({id: expandedid});
  12. 		}
  13. 		return false;
  14.     })
  15. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.