Toggle Dropdown – jQuery tutorial

  November 29th, 2008 | In JavaScript, Tutorials, jQuery | 6 Comments »

Most of us even though we may have heard of jQuery, may not have tried their hand at it. probably like me untill sometime ago. This tutorial is really simple for anyone who knows jQuery, but for those who don’t it may be interesting enough to get you started.

This tutorials demonstrates how to create toggle dropdowns, like the one in gamil reply button. [ demo & download links at the bottom ]

HTML : 

<div id="droplist">
	<span class="dropper">Go Somewhere</span>
    <div class="links">
        <a href="#">Google the great</a>
        <a href="#">Yahoo the not so great</a>
    </div>
</div>

JavaScript – jQuery

//Select the .dropper class - toggles the dropdown
//and add toggle to toggle between 2 states - show & hide
$('#droplist .dropper').toggle(
	//function to show dropdown which clicked once
	function() {
		//select the offsets left and top of the current element
		offset = $(this).offset();
		var x, y;
		//set the top coordinatess for menu
		x = offset.left;
		y = offset.top + $(this).height() + $(this).css('padding');
		//set the coordinates, and show the element
		$('#droplist .links')
			.css( { left:x, top:y } )
			.show();
	},
	//toggle functionality 2 - hide when clicked again
	function() {
		$('#droplist .links').hide();
	}
);

And some CSS :

body { font:12px verdana; text-align:left; line-height:20px; }
#droplist .dropper { border:1px solid #CCCCCC; padding:5px; cursor:pointer; }
#droplist .links { display:none; position:absolute; background:#FBFBFB; border:1px solid #CCCCCC; padding:5px;  }
#droplist .links a { display:block; }

Simple, ain’t it.

“$()” acts as a css selector, where in you just need to specify which node you would like to select, just the way one would do in css. $(this) is a reference to the the currently active node, so in our case it would indirectly be a reference to “#droplist .dropper”.
Try using fadeIn() and fadeOut() instead of show() & hide() respectively.
Also other than the display:attribute in the css, you can change anything to suit your need.

Hope it was helpful, if so drop in a comment :].

Preview : Preview
Download : jquery_toggle.zip [ jquery.js + toggle.html ]

  Tags : jQuery, Tutorials

6 Responses to “Toggle Dropdown – jQuery tutorial”

1. Andrea on December 1st, 2008 at 8:08 pm
   

   Hi, have played a bit with your code.
   wanted to make it work with multiple menus, so this is the slightly updated version:

   (converted the droplist from ID to CLASS)

   $(‘.droplist .dropper’).toggle(
   function() {
   off = $(this).offset();
   var x = off.left;
   var y = off.top + $(this).height() + $(this).css(‘padding’);
   $(this).siblings(‘.links’)
   .css( { left:x, top:y } )
   .show();
   },
   function() {
   $(this).siblings(‘.links’).hide();
   }
   );

2. Kalyan Chakravarthy on December 1st, 2008 at 8:20 pm
   

   Great, looks cool andrea…

3. mahi on December 7th, 2008 at 6:25 pm
   

   dropdown ko mai dreamweaver pe adjust nahi kar pa raha hoon

4. Kalyan Chakravarthy on December 7th, 2008 at 8:08 pm
   

   Adjust karne ke zaroorat nahi hai, [ no need to adjust ]
   all you need to do is place it along with your other source code. And be sure to adjust the style according to your needs.

5. vishalhd on December 23rd, 2008 at 2:20 am
   

   dude good stuff. good stuff.

6. 86 jQuery Resources To Spice Up Your Website | Hi, I'm Grace Smith on March 20th, 2009 at 9:20 pm
   

   [...] Toggle Dropdown – jQuery tutorial [...]