- Menu scripts
- Window scripts
- Calendar scripts
- Gallery scripts
- Form widgets
- Tab view scripts
- Table widgets
- Drag and drop
- Folder trees
- AJAX scripts
- Content Effects
- Misc scripts
- Chess widgets
- DHTML Suite
Download sliding show/hide script
Put this into your <HEAD> section
Put this into your <BODY> section
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 dhtmlgoodies.com ?</div>
dhtmlgoodies.com 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:
showHideContent(false,1); // Automatically expand first item
This will automatically show the first item.
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;
- September, 11th, 2006: Fixed problem with the script in Netscape 7.1.
- April, 3rd, 2006: Fixed problem with initial sliding in IE.