Drop down menu

[turbohost]

Hi Guys,

I want to create a drop down menu. More precise, if you click on a plus on the page you will get a lot more information. Is there some good information available on how to create this stuff?

Turbo

[BlobFisk]

Hi turbohost,

I'm a little confused. Do you want to create a drop down menu, or a feature whereby you can give people a snippet of detail and they can get the rest by hittin a + type icon?

Both can be created without too much difficulty. For the latter, you need to use a <div> (say) with the main body of the detail. Employ a little CSS to not display it (display:none;) and then write a simple script to toggle the display from none to block and back again - changing the icon as you go (innerHTML is your friend here).

HTH

[turbohost]

Hi Blobfisk,

I meant the latter one. How can I create the script to make the div visible again? Are there some examples available? Sorry, php novice :->

Turbo

[BlobFisk]

This is best done using a client side script, the most common is Javascript.

When you break down what is involved then it is quite straightforward.

The starting state of things is that you have your + icon in a container, say a <span>. Give the span an ID so that you can access it using the script. The <div> containing the content you want to display/hide is initially hidden using CSS.

The script that you will write will do a few things:
1. Display/Hide the content
2. Change the + icon into a - icon
3. Change a variable

1. Display/Hide the content
This is done by changing the display property of the div that contains the property. For example, documnent.getElementById('contentDIV').style.display='block';.

2. Change the + icon into a - icon
Since your <a href=".." title=".." onclick=".."><img src="plus.gif" alt=".."></a> is wrapped in a container you can use the innerHTML method to change it's contents. In this case I would suggest that you treat the anchor as the container and merely change the img call.

3. Change a variable
This will allow you to figure whether you should be showing or hiding the content. You know that initially your content is hidden, so set you variable to false (divStatus = false, for example). Then using a simple if conditional you can do the correct actions (in pseudocode):

if(divStatus==false) {
- toggle the layer display to block
- change the icon to the [-] icon
- change the variable to true
}
else {
- toggle the layer display to none
- change the icon to the [+] icon
- change the variable to false
}

HTH