New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
Download sliding show/hide script
Put this into your <HEAD> section
Put this into your <BODY> section
Configuration
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 dhtmlgoodies.com ?</div>
<div class="dhtmlgoodies_answer">
<div>
dhtmlgoodies.com is a private site developed and maintained by Alf Magne Kalleland.
</div>
</div>
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
</script>
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.
Here's one simple example:
<style type="text/css">
.expandedNode div{
display: block;
margin-left:20px;
}
.collapsedNode div{
display:none;
}
</style>
<div class="collapsedNode" style="cursor:pointer" href="#" onclick="this.className = this.className=='collapsedNode' ? 'expandedNode' : 'collapsedNode'">Main node
<div>Content to expand<br>Content to expand</div>
</div>
<div class="collapsedNode" style="cursor:pointer" href="#" onclick="this.className = this.className=='collapsedNode' ? 'expandedNode' : 'collapsedNode'">Another Main node
<div>More Content to expand<br>More Content to expand</div>
</div>
The only Javascript here is use to toggle css class
I figured I could use javasccript document write on a link but it does not seem to work, Anyone has the key?
*Your Question Link*
similar css code:p.slider-link{ color:#666; margin:0px; padding:0px; }p.slider-link:hover { text-decoration:underline; color:#F00;}
hope this helps...btw: awesome script m8Can i use this slide menu verticaly?
If i can,please help me. I don't know javascript but expert in php:D
Doesn't work :-(
Post your comment
Comment preview: