Download sliding show/hide script

Demo | Demo 2

Bookmark and Share

Put this into your <HEAD> section

Put this into your <BODY> section


Create content

You use plain HTML to create your "questions" and "answers". This is coded in the following format:
<div class="dhtmlgoodies_question">Q: What kind of site is ?</div>
<div class="dhtmlgoodies_answer">
  <div> is a private site developed and maintained by Alf Magne Kalleland.

Notice that I have used two DIVs for the answers.

You use CSS(The part between <style type="text/css"> and </style>) to configure the layout. Look at the examples for more help.

I have used a background image in this demo for the rounded edge at the right of each question:

If you like to use it, right click on it and select "Save target As". Put the file in a sub folder called "images".

Initialize show content

You can automatically expand content when the pages load. This is done by calling the showHideContent function manually. Example:

<script type="text/javascript">
showHideContent(false,1); // Automatically expand first item

This will automatically show the first item.

Javascript variables

There are two javascript variables which you can use to control the slide speed. These are:
var dhtmlgoodies_slideSpeed = 10; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster

If you want to be able to expand multiple items at the same time, you can do that by setting dhtmlgoodies_expandMultiple to true, example:

var dhtmlgoodies_expandMultiple = true;

Update log

  • September, 11th, 2006: Fixed problem with the script in Netscape 7.1.
  • April, 3rd, 2006: Fixed problem with initial sliding in IE.


Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

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