Scroll down content script

Demo

Bookmark and Share

Put this into your <HEAD> section

Put this into your <BODY> section

Put the code in the textarea below where you want the pulldown to appear.

Implementation

Content

Put the slide down content right below the line <!-- slide down content goes here --> in the code

This is the typical code used to show the content:

<a href="#" onclick="slidedown_showHide('box1');return false;">Try it</a>

"box1" is the id of the slide down box.

Configuration

This javascript function is optional. Use it to modify the animation speed.:

  1. setSlideDownSpeed(newSpeed) - Set slide down speed

The speed and width could also be adjusted manually in the javascript and css code if you don't want to use the javascript functions.

By modifying the cascading style sheet(CSS) of the .dhtmlgoodies_contentBox, you can change the appearance of the slide down content.

border:1px solid #317082; /* Border color and style */
background-color:#E2EBED; /* Background color */

For further information, see how these functions and CSS are used in the code.

Update log

  • December, 13th, 2006 - Supporting more than one box per page

Comments

Teri
Is there a way to make this work so that only one slide down content box is visible at a time? As it is you can expand every div at once and I'd like to make it so that if another div is expanded the previous one closes automatically.
Teri at 08:35AM, 2011/02/24.
Mohamed Tom Field
Great,good work for all your turorials!Regards!
Mohamed Tom Field at 04:26PM, 2011/03/01.
raja
Fantastic script really it is useful for me.. i know it is very rare example. thanks a lot
raja at 09:50AM, 2012/08/23.
Ronald
How can I make the link and content horizontally align in a parallel line?I use "float:left;", but nothing changed.
Ronald at 09:21AM, 2013/04/08.
Andrew Faraone
How would I alter this to work onHover rather than onClick?
Andrew Faraone at 03:59PM, 2013/11/07.
divya
thank u soo much very useful...how to change background blue color into white?
divya at 09:34AM, 2014/08/06.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com