Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Multiple Select Lists

    Hello,

    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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,462
    Thanks
    23
    Thanked 634 Times in 633 Posts
    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?

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    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.

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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&nbsp;&nbsp;<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&nbsp;&nbsp;<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>

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,108
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Easiest and fastest fix to stop the "jump" would be:
    Code:
    <td name="stypes" class="fcell" align="left" width="150px">

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,108
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    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.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    <script type="text/javascript">
    // Modified from: http://www.codingforums.com/showthread.php?p=1305899#post1305899
    
    function Toggle(IDS) {
      var CState = document.getElementById(IDS);
      if (CState.style.display != "block") { CState.style.display = "block"; }
                                      else { CState.style.display = "none"; }
    }
    </script>
    </head>
    <body>
    <div style="width:150px;float:left">
     <label> <input type="checkbox" value="2" onclick="Toggle('a2')"> Specialized </label>
     <div id="a2" style="display:none">
      <label> <input type="checkbox" name="spld" value="1"> Animal Carrier </label><br>
      <label> <input type="checkbox" name="spld" value="2"> Boat Hauler </label><br>
      <label> <input type="checkbox" name="spld" value="3"> Heavy Haulers </label><br>
      <label> <input type="checkbox" name="spld" value="4"> Moving Van </label><br>
     </div>
    </div>
    
    <div style="width:200px;float:left">
     <label> <input type="checkbox" value="1" onclick="Toggle('a1')"> Flatbed </label>
     <div id="a1" style="display:none">
      <label> <input type="checkbox" name="fbed" value="1"> Flatbed Only </label><br>
      <label> <input type="checkbox" name="fbed" value="2"> Landoll </label><br>
      <label> <input type="checkbox" name="fbed" value="3"> Lowboy </label><br>
      <label> <input type="checkbox" name="fbed" value="4"> Maxi </label><br>
      <label> <input type="checkbox" name="fbed" value="5"> Removable Gooseneck </label><br>
      <label> <input type="checkbox" name="fbed" value="6"> Step Deck </label><br>
     </div>
    </div>
    
    </body>
    </html>
    Last edited by jmrker; 01-13-2013 at 04:37 AM.

  • Users who have thanked jmrker for this post:

    Rcoleman25 (01-15-2013)

  • #7
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    All I did was give the +/- sign a fixed width.

    Also dropped-in the missing cookie handlers, but I'm not sure your algorithm is correct:
    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 = "-";
            setCookie(theName,menuArray[i], 30); }
          }
        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 = "+";
            setCookie(theName,0,-1); }
          else {
            document.getElementById(theID).style.display = "block";
            document.getElementById("tick_"+menuArray[i]).innerHTML = "-";
            setCookie(theName,menuArray[i],30 ); }
          }
        else {
          document.getElementById(menuArray[i]).style.display = "none";
          document.getElementById("tick_"+menuArray[i]).innerHTML = "+";
        }
      }
    }
    
    function setCookie( cName, cValue, daysLife, cPath, cDomain, cSecure )
    {
      var dt = new Date(), // Duration can be specified either as number of days or "secs=n", where n = seconds.
          life = daysLife || 0, 
          expSecs = ( expSecs = life.toString().match( /\bsecs\s*=\s*(\d+)/i ) ) ? Number( expSecs[ 1 ] ) : 0,
          params = ( life ? ( ";expires=" + new Date( expSecs ? ( dt.setTime( dt.getTime() + expSecs * 1000 ) )                                                          : ( dt.setDate( dt.getDate() + life) ) ).toUTCString() ) : "" )
                + ( cPath ? (";path=" + cPath) : "" )
                + ( cDomain ? ";domain=" + cDomain : "" )
                + ( cSecure ? ";secure" : "" );
    
      document.cookie = cName + "=" + encodeURIComponent( cValue ) + params;
    
      return readCookie( cName );
    }
    
    function readCookie( cName )
    {
      var v;
    
      return decodeURIComponent( ( v = ( document.cookie || "" ).match( "(^|\\s)" + cName + "=([^;]+)" ) ) ? v[ 2 ] : "" );
    }
    
    
    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;
    }
    
    #tick_a2{position:absolute;width:20px}
    </style>
    </head>
    <body>
    <table cellpadding="10">
    <tr>
    <td name="stypes" class="fcell" align="left">
          <input type="checkbox" name="type" value="" style=""> Specialized&nbsp;&nbsp;<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&nbsp;&nbsp;<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>

  • #8
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You have the openClose function appearing twice.

    Code:
    if (document.getElementById) {
    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

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    if ( document.getElementById ) has not been needed since Internet Explorer version *5* appeared ... in MARCH 1999.

    Even if you allow 3 years for all the old MSIE version 4 browsers to disappear, that is still MORE THAN TEN YEARS AGO.

    So any time you see such code--and expecially when it is paired up with document.write--you should run away from that code as fast as you can.
    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.

  • #10
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    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.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    <script type="text/javascript">
    // Modified from: http://www.codingforums.com/showthread.php?p=1305899#post1305899
    
    function Toggle(IDS) {
      var CState = document.getElementById(IDS);
      if (CState.style.display != "block") { CState.style.display = "block"; }
                                      else { CState.style.display = "none"; }
    }
    </script>
    </head>
    <body>
    <div style="width:150px;float:left">
     <label> <input type="checkbox" value="2" onclick="Toggle('a2')"> Specialized </label>
     <div id="a2" style="display:none">
      <label> <input type="checkbox" name="spld" value="1"> Animal Carrier </label><br>
      <label> <input type="checkbox" name="spld" value="2"> Boat Hauler </label><br>
      <label> <input type="checkbox" name="spld" value="3"> Heavy Haulers </label><br>
      <label> <input type="checkbox" name="spld" value="4"> Moving Van </label><br>
     </div>
    </div>
    
    <div style="width:200px;float:left">
     <label> <input type="checkbox" value="1" onclick="Toggle('a1')"> Flatbed </label>
     <div id="a1" style="display:none">
      <label> <input type="checkbox" name="fbed" value="1"> Flatbed Only </label><br>
      <label> <input type="checkbox" name="fbed" value="2"> Landoll </label><br>
      <label> <input type="checkbox" name="fbed" value="3"> Lowboy </label><br>
      <label> <input type="checkbox" name="fbed" value="4"> Maxi </label><br>
      <label> <input type="checkbox" name="fbed" value="5"> Removable Gooseneck </label><br>
      <label> <input type="checkbox" name="fbed" value="6"> Step Deck </label><br>
     </div>
    </div>
    
    </body>
    </html>
    Thank You! But how exactly do I put the + - back?

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    ?? It's still not clear what your intent here is.

    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.

    I'd just do this:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    <script type="text/javascript">
    function Toggle(span, IDS) {
      var CState = document.getElementById(IDS);
      if (CState.style.display != "block") 
      { 
          CState.style.display = "block"; 
          span.innerHTML = span.innerHTML.replace("+","-");
      } else {
          CState.style.display = "none"; 
          span.innerHTML = span.innerHTML.replace("-","+");
      }
    }
    </script>
    </head>
    <body>
    <div style="width:150px;float:left">
     <span onclick="Toggle(this,'a2')" style="cursor: pointer;"> + Specialized </span>
     <div id="a2" style="display:none">
      <label> <input type="checkbox" name="spld" value="1"> Animal Carrier </label><br>
      <label> <input type="checkbox" name="spld" value="2"> Boat Hauler </label><br>
      <label> <input type="checkbox" name="spld" value="3"> Heavy Haulers </label><br>
      <label> <input type="checkbox" name="spld" value="4"> Moving Van </label><br>
     </div>
    </div>
    
    <div style="width:200px;float:left">
     <span onclick="Toggle(this,'a1')" style="cursor: pointer;"> + Flatbed </span>
     <div id="a1" style="display:none">
      <label> <input type="checkbox" name="fbed" value="1"> Flatbed Only </label><br>
      <label> <input type="checkbox" name="fbed" value="2"> Landoll </label><br>
      <label> <input type="checkbox" name="fbed" value="3"> Lowboy </label><br>
      <label> <input type="checkbox" name="fbed" value="4"> Maxi </label><br>
      <label> <input type="checkbox" name="fbed" value="5"> Removable Gooseneck </label><br>
      <label> <input type="checkbox" name="fbed" value="6"> Step Deck </label><br>
     </div>
    </div>
    
    </body>
    </html>
    No?
    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.

  • Users who have thanked Old Pedant for this post:

    Rcoleman25 (01-15-2013)

  • #12
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,108
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by Rcoleman25 View Post
    Thank You! But how exactly do I put the + - back?
    Just as recommended in the last posted thread.

    I had tried to keep it the same display as your original post with the top checkbox.
    Last edited by jmrker; 01-15-2013 at 01:16 AM.

  • Users who have thanked jmrker for this post:

    Rcoleman25 (01-15-2013)

  • #13
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    ?? It's still not clear what your intent here is.

    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.

    I'd just do this:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    <script type="text/javascript">
    function Toggle(span, IDS) {
      var CState = document.getElementById(IDS);
      if (CState.style.display != "block") 
      { 
          CState.style.display = "block"; 
          span.innerHTML = span.innerHTML.replace("+","-");
      } else {
          CState.style.display = "none"; 
          span.innerHTML = span.innerHTML.replace("-","+");
      }
    }
    </script>
    </head>
    <body>
    <div style="width:150px;float:left">
     <span onclick="Toggle(this,'a2')" style="cursor: pointer;"> + Specialized </span>
     <div id="a2" style="display:none">
      <label> <input type="checkbox" name="spld" value="1"> Animal Carrier </label><br>
      <label> <input type="checkbox" name="spld" value="2"> Boat Hauler </label><br>
      <label> <input type="checkbox" name="spld" value="3"> Heavy Haulers </label><br>
      <label> <input type="checkbox" name="spld" value="4"> Moving Van </label><br>
     </div>
    </div>
    
    <div style="width:200px;float:left">
     <span onclick="Toggle(this,'a1')" style="cursor: pointer;"> + Flatbed </span>
     <div id="a1" style="display:none">
      <label> <input type="checkbox" name="fbed" value="1"> Flatbed Only </label><br>
      <label> <input type="checkbox" name="fbed" value="2"> Landoll </label><br>
      <label> <input type="checkbox" name="fbed" value="3"> Lowboy </label><br>
      <label> <input type="checkbox" name="fbed" value="4"> Maxi </label><br>
      <label> <input type="checkbox" name="fbed" value="5"> Removable Gooseneck </label><br>
      <label> <input type="checkbox" name="fbed" value="6"> Step Deck </label><br>
     </div>
    </div>
    
    </body>
    </html>
    No?
    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.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •