Drop down with Javascript (EN)

english version on my previous article

*Can* asked me to translate my previous tutorial. So here it is!
—————————

How the heck did I make the drop down panel above?
Ok, maybe it’s a kids game for some of you, but I guess there’s someone out there who might be interested. For these (few) people, here’s the tute.

This is all web standards compliant, keeping my Xhtml clean and valid, and so my Css stylesheet.
The interaction is built using some very useful (and yet very well-knowed) free Javascript libraries, released under a GPL license.
To be specific, you will need the following libraries:

that you can download from their respective web sites.

So, now that we got the libraries, let’s include them in our Html document, this way:

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js"></script>
<script type="text/javascript" src="/js/behaviour.js"></script>

Obviously, you have to modify the paths to match your site/server strcture. Then, we have to set up the 2 elements involved in the interaction: the link that activates/deactivates the drop down animation and the Div with the drop down content.

Let’s start with the link:

<a id="open" href="javascript:void(0);" >Open</a> 
<a id="close" href="javascript:void(0);" style="display:none;">Close</a>

Elements IDs are very important, we’ll discover why very soon.
Now let’s create the Div with the content and call it contents:

<div id="contents" style="display:none;">
     bla bla bla bla bla bla
</div>

Now, normally, to give a link a Javascript behaviour you would use the onclick tag attribute.
However, it’s a old and dirty way to manage Javascript behaviours, which might also cause validation problems.
So, we’re not gonna use it anymore!

Behaviour comes in our help, giving us a clean method to add Javascript behaviours to Html elements, using Css selectors.
We have to define some rules, as follows:

// Rules
var myrules = {
  '#open' : function(element){
    element.onclick = function(){
      var targetDiv = $('contents');
      new Effect.BlindDown(targetDiv,{duration: 0.5});
      new Effect.Fade(this);
      Effect.Appear('close', {delay: 1});
    }
  },
  '#close' : function(element){
    element.onclick = function(){
      var targetDiv = $('contents');
      new Effect.BlindUp(targetDiv,{duration: 0.5});
      new Effect.Fade(this); 
      Effect.Appear('open', {delay: 1});
    }
  }
};

Save this JS to a file named rules.js and include it in the Html document.

<script type="text/javascript" src="/js/rules.js"></script>

The code uses also the libraries from Script.aculo.us for animation effects and from Prototype for DOM manipulation and control.
Further and in depht explanation of these two libraries can be found on their respective websites, where you can find wikis and commented examples.

Now, Behaviour requires us to insert the following code, in order to run correctly and apply the rules:

  <script type="text/javascript">
   // <![CDATA[
     // Behaviour Rules
    Behaviour.register(myrules);
   // ]]>
   </script>

I usually add the code at the end of my document, just before closing the body tag.
Now, open up a browser window and test.
Please, do yourself a favor: do not use Internet Explorer for testing! Never!

So, is it working?

Drop Down Screenshot

The result should look like the drop down above (obviously, you have to add you own Css to spice it up and make it look cool!!).

Well, you’ve seen how a bunch of lines of code can help you create very nice effects, easiliy and in a standard compliant way (you don’t always need Flash).

Good coding to all of you!!

—————————
Updated 16.07.2006:
Download the Source Code (28k ZIP).

—————————
Updated 20.12.2006:

Many people asked for multiple drop-downs panels within one page or multiple links to open/close a single drop-down panel.

I made a little variation to the original script to cover both cases.
Hope this helps.
Download the Source Code (28k ZIP).

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

About this entry

You’re currently reading “Drop down with Javascript (EN),” an entry on jek2kdotcom

Posted on:
14.07.2006 @ 10pm
Categories:
Web Development, Tutorials, Javascript