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


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.