I'm having a problem creating multiple select dropdown lists that expand and collapse when you click them. I need them to open and close side by side. I have tried to make the code work in multiple formats but have not been successful so far. Attached is a screenshot of what I am referencing. Thanks
This is so much easier as a div or a form with multiple checkboxes. Why do you want a multiple select dropdown list? How does that add to the page? What code have to tried that almost gave the desired results?
Sunfighter: I think he really is using <div>s for the dropdowns. He means a *menu* dropdown, not a <select> dropdown.
I would bet he is using one of the standard "menuing" systems and they are typically designed to have only one menu at a time show.
Coleman: We could easily write this from scratch for you, but it would make a lot more sense to simply alter the code you are already using. If at all possible, point us to a URL that shows your problem in action. If that's not possible, post *REAL* code.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Sunfighter: I think he really is using <div>s for the dropdowns. He means a *menu* dropdown, not a <select> dropdown.
I would bet he is using one of the standard "menuing" systems and they are typically designed to have only one menu at a time show.
Coleman: We could easily write this from scratch for you, but it would make a lot more sense to simply alter the code you are already using. If at all possible, point us to a URL that shows your problem in action. If that's not possible, post *REAL* code.
Thanks for the help guys... I got it working BETTER by putting in absolute positions on some of the objects and putting it in a table... now the problem is when I expand and collapse the leftmost (Specialized) list it moves the right (Flatbed) list somewhat. Here is the code I am using...
Code:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Sandeep Gangadharan | http://www.sivamdesign.com/scripts/ */
if (document.getElementById) {
document.writeln('<style type="text/css">')
document.writeln('.main {text-decoration:none; font-size:18px; font-weight:900; color:blue; cursor:hand; cursor:pointer;}')
document.writeln('.main2 {text-decoration:none; font-size:18px; font-weight:900; color:blue; cursor:hand; cursor:pointer;}')
document.writeln('.sublinks1 {display:none;}')
document.writeln('.sublinks2 {display:none;}')
document.writeln('</style>') }
// Below you should add a1, a2 etc. for each main link you wish to include
// so if you want 3 main links you should add a1, a2, a3 in the format shown
// enclosed in double quotes
var mainNum = new Array("a1");
function openClose(theName, menuArray, theID) {
for(var i=0; i < menuArray.length; i++) {
if (menuArray[i] == theID) {
if (document.getElementById(theID).style.display == "block") {
document.getElementById(theID).style.display = "none";
document.getElementById("tick_"+menuArray[i]).innerHTML = "+";
eraseCookie(theName); }
else {
document.getElementById(theID).style.display = "block";
document.getElementById("tick_"+menuArray[i]).innerHTML = "-";
newCookie(theName,menuArray[i],exp); }
}
else {
document.getElementById(menuArray[i]).style.display = "none";
document.getElementById("tick_"+menuArray[i]).innerHTML = "+";
}
}
}
var mainNum2 = new Array("a2");
function openClose(theName, menuArray, theID) {
for(var i=0; i < menuArray.length; i++) {
if (menuArray[i] == theID) {
if (document.getElementById(theID).style.display == "block") {
document.getElementById(theID).style.display = "none";
document.getElementById("tick_"+menuArray[i]).innerHTML = "+";
eraseCookie(theName); }
else {
document.getElementById(theID).style.display = "block";
document.getElementById("tick_"+menuArray[i]).innerHTML = "-";
newCookie(theName,menuArray[i],exp); }
}
else {
document.getElementById(menuArray[i]).style.display = "none";
document.getElementById("tick_"+menuArray[i]).innerHTML = "+";
}
}
}
function memStatus() {
var num = readCookie("MN");
if (num) {
document.getElementById(num).style.display = "block";
document.getElementById("tick_"+num).innerHTML = "-"; }
var num1 = readCookie("SB");
if (num1) {
document.getElementById(num1).style.display = "block";
document.getElementById("tick_"+num1).innerHTML = "-"; }
}
// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
memStatus();
});
</script>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Hillel Aftel | */
function checkAll(checkname, exby) {
for (i = 0; i < checkname.length; i++)
checkname[i].checked = exby.checked? true:false
}
</script>
<style>
.sublinks1{
position:absolute;
}
.sublinks2{
position:absolute;
}
</style>
</head>
<body>
<table cellpadding="10">
<tr>
<td name="stypes" class="fcell" align="left">
<input type="checkbox" name="type" value="" style=""> Specialized <span onClick="openClose('MN',mainNum2,'a2')" class="main" id="tick_a2">+</span>
<span id="a2" class="sublinks2">
<span class="link3"><input type="checkbox" name="spld" value=""> Animal Carrier</span><br>
<span class="link3"><input type="checkbox" name="spld" value=""> Boat Hauler</span><br>
<span class="link3"><input type="checkbox" name="spld" value=""> Heavy Haulers</span><br>
<span class="link3"><input type="checkbox" name="spld" value=""> Moving Van</span><br>
</span>
</td>
<td name="ftypes" class="fcell" align="left">
<input type="checkbox" name="type" value=""> Flatbed <span onClick="openClose('MN',mainNum,'a1')" class="main" id="tick_a1">+</span>
<span id="a1" class="sublinks1">
<span class="link2"><input type="checkbox" name="fbed" value=""> Flatbed Only</span><br>
<span class="link2"><input type="checkbox" name="fbed" value=""> Landoll</span><br>
<span class="link2"><input type="checkbox" name="fbed" value=""> Lowboy</span><br>
<span class="link2"><input type="checkbox" name="fbed" value=""> Maxi</span><br>
<span class="link2"><input type="checkbox" name="fbed" value=""> Removable Gooseneck</span><br>
<span class="link2"><input type="checkbox" name="fbed" value=""> Step Deck</span><br>
</span>
</td>
</tr>
</table>
</body>
</html>
If you wanted a much simplified version, consider this.
I removed the 'style'ing because you did not supply it and I didn't see much need for it.
I also removed the '+' and '-' change by using the first checkbox as the display flag.
They could easily be put back, but it did not look like they were being used anyway.
The above line (and its corresponding closing bracket }) are redundant and document.writeln is no longer an acceptable practice - these show the age of that script.
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
If you wanted a much simplified version, consider this.
I removed the 'style'ing because you did not supply it and I didn't see much need for it.
I also removed the '+' and '-' change by using the first checkbox as the display flag.
They could easily be put back, but it did not look like they were being used anyway.
Do you or don't you want the words "Specialized" and "Flatbed" to act as ON/OFF toggles?
I don't understand why they are *BOTH* checkboxes *AND* toggles. And they aren't very useful or meaningful checkboxes, in any case. The checkboxes don't have names, so they can't be seen by whatever server-side page you post the <form> to, no matter what. I, personally, would not use a checkbox there if they are supposed to be a toggle.
Do you or don't you want the words "Specialized" and "Flatbed" to act as ON/OFF toggles?
I don't understand why they are *BOTH* checkboxes *AND* toggles. And they aren't very useful or meaningful checkboxes, in any case. The checkboxes don't have names, so they can't be seen by whatever server-side page you post the <form> to, no matter what. I, personally, would not use a checkbox there if they are supposed to be a toggle.
Thanks... works perfectly, the reason they have checkboxes is that they are part of a group of vehicle types; however, only Flatbed and Specialized have sub-types. The rest of the vehicle types such as van, reefers, and dump trucks do not have sub-types.
So you *can* leave the checkbox there for Flatbed and Specialized, but it really makes no sense to do so unless those checkboxes have names and values, in line with the other types such as vans, reefers, etc.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Before you post, read our: 
