Click here to Skip to main content
13,094,732 members (68,667 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


17 bookmarked
Posted 14 Sep 2012

Simple Drop Down Panel jQuery Widget

, 18 Sep 2012
Rate this:
Please Sign up or sign in to vote.
jQuery widget structure explained on a simple drop down panel control.


jQuery widgets is a very handy tool for building modern web UI. In this little tutorial we will build a simple yet useful dropdown panel widget.  

Using the code

We will cover drop down panel and drop-down button within a div. So we can call simply apply the drop down panel feature like: 


And the div will have two classes to define a drop-down button (ddpanel-button) and drop-down area (ddpanel-box).  

<div id="userMenu">
  <a class="ddpanel-button">User Menu</a>
  <div class="ddpanel-box">
      <!-- whatever want to display -->
      <a href="#">Log out</a>

How it works 

First of all when a widget is applied to a div element, it looks for the button and box elements. This feature is hardcoded:

_create: function() {
    var self = this, o = self.options, el = self.element;
    // find the drop-down button and drop-down panel elements    
    o.objPanel = el.find('.ddpanel-box');
    o.objButon = el.find('.ddpanel-link');
    // hide panel
    // find absolute position of the button element
    var position = o.objButon.position();
    var bh          = o.objButon.height();
        // align panel with the button
        position: 'absolute',
        left: position.left,
        top: + bh
    // show the panel when the drop-down button clicked{

        // hide panel when user clicks anywhere on the document
        $(document).mouseup(function (e){

The _create function is called automatically by the jQuery widget factory when a widget is applied to an element. So we put out the initialization logic here. Also the widget factory gives the element widget applied as:

el = self.element;  

Also we define an options variable to store widget-specific data such as settings.  

options: {
    objPanel: '',
    objButon: '',
    effect: 'fast'

You may name the options variable whatever you want but options is a special variable name recognized by the widget factory class. This enables to set options for the widget easily. 


As you can see, the parameter you give the widget create function is recognized as options.

Now, we show our drop down panel when the user clicks the drop down button and hide the panel when the user clicks anywhere on the document. 

But in case we don't want the panel to be hidden when the user clicks on the panel. In this case, we need to modify the hide-logic something like:

$(document).mouseup(function (e){
    if (o.objPanel.has( === 0){

This time we check if the clicked area is not in the panel div. Have fun!


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Evren Yortuçboylu
Software Developer (Senior)
Turkey Turkey
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralLooks very good Pin
Olivier Giulieri23-Sep-12 21:56
memberOlivier Giulieri23-Sep-12 21:56 
GeneralRe: Looks very good Pin
Evren Yortuçboylu25-Sep-12 20:36
memberEvren Yortuçboylu25-Sep-12 20:36 
GeneralMy vote of 5 Pin
Kanasz Robert19-Sep-12 4:35
mvpKanasz Robert19-Sep-12 4:35 
GeneralRe: My vote of 5 Pin
Evren Yortuçboylu19-Sep-12 5:57
memberEvren Yortuçboylu19-Sep-12 5:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170813.1 | Last Updated 18 Sep 2012
Article Copyright 2012 by Evren Yortuçboylu
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid