Drop Down Content - Tested in IE6.0, Netscape8.1, Opera9.01, Firefox1.5.0.6 and AOL Explorer1.2

Information is "dropping" down when you click on the link. Excellent when you want to present information and not have to worry about popup blockers.

We have tested the code in IE6.0, Firefox1.5.0.6, Opera9.01, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is an easy three (3) part copy and paste code that goes in both the <HEAD> - two 2 parts, (.js file and CSS section*) and <BODY> sections (wherever you want the effect to appear) of your document. It also makes use of an external .js script (No reconfigurations) you need to save and upload into your directory then add a snipplet of code into the <HEAD> section to call the external.js file.

* The site you get the code from tells you to

This is all well and good if you have a CSS section in your document. If you don't and paste the code (unfinished) you will see a whole bunch of text on your page and wonder why. You must first complete the code with opening and closing CSS tags, then paste it into the <HEAD> section of your document. See below where and howto.

Place CSS Section Of Code Here

</style>

If you can notice, all we did was to add the opening and closing CSS tags around the CSS section of code. Now just paste it as usual into the <HEAD> section of the document.

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

For your Information: If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external .js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Step One Depending on which of the above methods you have selected (external.js file or Traditional Copy/Cut & Paste), you will add either the snipplet of code (after you have uploaded the external.js file) into the <HEAD> section or the completed section of code that you added the opening and closing script tags.

Snipplet Of Code
<script type="text/javascript" src="dropDown.js">
</script> Traditional Copy/Cut and Paste
<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here

// End -->
</script>

External .js file

Traditional Copy/Cut & Paste Code with opening & closing tags that you had to add into the <HEAD> section of code that was originally earmarked to be an external .js file.

If you would like to see an example of this effect using the "Traditional Cut/Copy & Paste" method, grab the below link and you are there. Examine our "Source" code (on the page you will be opening) to see how we had to reconfigure it to make it work. We have it very well documented for your convenience.
[ Traditional Cut/Copy & Paste Method ]

#dhtmlgoodies_contentBox {
border:1px solid #317082;
height:0px;
visibility:hidden;
position:absolute;
background-color:#E2EBED;
overflow:hidden;
padding:2px;
width:250px;
}

#dhtmlgoodies_content {
position:relative;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
width:100%;
font-size:0.8em;
}

#dhtmlgoodies_slidedown {
position:relative;
width:250px;
}

Just study and play around with all the color coded areas until you get the combination that works for you and your site.

For your Information: If you change the word solid to that of dotted, the border effect becomes completely different. See below screen capture.

Effect with border changed from solid to dotted

Note Of Importance: In reference to the above lack of a height setting in the CSS section. This will expand as to accommodate the material that is inserted. The width will stay constant as per your setting.

<div id="dhtmlgoodies_slidedown">
<div id="dhtmlgoodies_control">
<a href="#" onclick="slidedown_showHide();return false;">Click Here and Try it</a>
</div>
<div id="dhtmlgoodies_contentBox">
<div id="dhtmlgoodies_content">



Here is where you will enter your content <br><br>


</div>
</div>
</div>

<script type="text/javascript">
setSlideDownSpeed(4);
</script>

Name of link to activate effect.

self-explanatory. Your content goes here.

This is where you regulate how fast or slow the drop down box will open. The higher the number, the faster it will drop down.

For your Information: The way this script is designed, you can only have one of these drop downs per page. If you add a second one, it will not function.

In our example we told you to be sure to make your links open in a new browser window. If you need a little refresher on howto make a link open in a new window, either grab the link in our example or the one below.
[ Open Image or Text Links in New Window ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]