 |
| No items matching your keywords were found. |
Using a Drop down menu to hide/show divs?
Here's the scenario:
I want to create a comment form where users need to a subject for a drop down menu, which would in turn hide or show specific textbox form elements.
Origingally, I attempted the code below which required multiple forms in separate divs with each subject selection respectively toggling div visibility:
function showElement(id)
{
if(!id) return;
for(i=1; i<=7; i++) document.getElementById('e' + i).style.display = 'none';
document.getElementById('e' + id).style.display = 'block';
}
The only problem was that using ASP in dreamweaver, I cannot create multiple forms on a page. So I need to somehow do this using one form.
The method I was thinking is this:
Drp.dwn menu has 7 items (subjects).
Form has a maximum of 7 form elements each in their own div layer.
Selecting Item 1 shows element 1,2,3,4 and hides 5,6,7.
Selecting Item 2 shows element 1,2,3 and hides 4-7.
and so forth.
Any suggestions?
I would do something the longer way, to ensure it works (without all that pesky and hard-to-read code). Something like this.
function hideAllDivs() {
for(i=1; i<=7; i++) document.getElementById('e' + i).style.display = 'none';
}
function selectElement1() {
hideAllDivs();
document.getElementById('1').style.display = 'block';
document.getElementById('2').style.display = 'block';
document.getElementById('3').style.display = 'block';
document.getElementById('4').style.display = 'block';
}
function selectElement2() {
hideAllDivs();
document.getElementById('1').style.display = 'block';
document.getElementById('2').style.display = 'block';
document.getElementById('3').style.display = 'block';
}
Then again, more complex code can be added, if necessary 
[HD] Spry Drop Down Menus & CSS Dreamweaver Tutorial