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 6 of 6
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    help plz in finding a script

    Hi,

    I am looking for a script where, when you click a checkbox, a series of options appears just below so that you can check a sub category of the main items.

    eg. check box for wines.

    when clickin the checkbox, it gives you a listr of red, white, sparkling, champagnes each, with its own checkbox.

    I looked through dynamic druive but didn't see anything close


    Any help most welcome.

    bazz

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    AZ, USA
    Posts
    685
    Thanks
    6
    Thanked 46 Times in 46 Posts
    Code:
    <form name="expandible">
    <input type="checkbox" name="uniquename" onLoad="this.checked=false;" onClick="toggle(this.name)";>List of Wines
    <div id="uniquename" style="visibility:hidden;">
    - <input type="checkbox"> Red
    - <input type="checkbox"> White
    - <input type="checkbox"> Sparkling
    - <input type="checkbox"> Champagnes
    </div>
    </form>
    <script>
    function toggle(name)
    {
    toggleBox=document.getElementById(name);
    if(toggleBox.style.visibility=='hidden')
    {
    toggleBox.style.visibility="visible";
    }
    else
    {
    toggleBox.style.visibility="hidden";
    }
    }
    </script>
    Every time toggle() is called, it shows a div with the same id as the name of the checkbox. You can build upon this and even use it with completely different HTML elements. Hope it helps!

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Crikey, I wasn't expecting that degree of help.

    that looks promising and I shall test it tomorrow.

    Thank you binaryWeapon

    bazz

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Thank you binaryWeapon.

    I am delighted with that script and I find the functioning of it to be very good. However, I have one slight difficulty.
    Edit: not seeming to work in ie6.


    Having fiddled about to make the expanding div push the lower content downwards, I can't seem to make the lowering fit the actual content. I mean some need to be pushed down 100px and others 200px. Is there a way to make it 'variable' to fit the height required?

    here is the code currently I would appreciate any help.

    Code:
    <form name="expandible">
    
    <input type="checkbox" name="pillows" onLoad="this.checked=false;" onClick="toggle(this.name)";>Pillows
    <div id="pillows" style="visibility:hidden;height:10px;">
    <table>
      <tr>
        <td colspan='2'>Guest 1:</td>
      </tr>
      <tr>
        <td>
        <input type="radio" name="first_pillow"> Goose Down Pillow  </td><td> <input type="radio" name="second_pillow"> Goose Down Pillow 
        </td>
    
      </tr>
      <tr>
        <td>
        <input type="radio" name="first_pillow"> Hollow Fibre Pillow  </td><td> <input type="radio" name="second_pillow"> Hollow Fibre Pillow <br />
        </td>
      </tr>
    
      <tr>
        <td>
        <input type="radio" name="first_pillow"> Non-Allergenic Pillow  </td><td> <input type="radio" name="second_pillow"> Hollow Fibre Pillow <br />
        </td>
      </tr>
    <tr>
        <td colspan='2'>Guest 2:</td>
    
      </tr>
      <tr>
        <td>
        <input type="radio" name="third_pillow"> Goose Down Pillow  </td><td> <input type="radio" name="fourth_pillow"> Goose Down Pillow 
        </td>
      </tr>
      <tr>
    
        <td>
        <input type="radio" name="third_pillow"> Hollow Fibre Pillow  </td><td> <input type="radio" name="fourth_pillow"> Hollow Fibre Pillow <br />
        </td>
      </tr>
      <tr>
        <td>
    
        <input type="radio" name="third_pillow"> Non-Allergenic Pillow  </td><td> <input type="radio" name="fourth_pillow"> Hollow Fibre Pillow <br />
        </td>
      </tr>
    </table>
    </div>
    </form>
    <script>
    function toggle(name)
    {
    toggleBox=document.getElementById(name);
    if(toggleBox.style.visibility=='hidden')
    {
    toggleBox.style.visibility="visible";
    toggleBox.style.height="200px";
    }
    else
    {
    toggleBox.style.visibility="hidden";
    toggleBox.style.height="10px";
    }
    }
    </script>

    bazz
    Last edited by bazz; 05-08-2008 at 04:40 AM.

  • #5
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    IE considers name and id as synonymous

    Your input name and id is the same, which confuses IE. For a fix, Change your code to:
    Code:
    <input type="checkbox" name="pillow" onLoad="this.checked=false;" onClick="toggle()";>
    ...Then, change your script to:
    Code:
    toggleBox=document.getElementById('pillows');
    See if it helps
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Thanks, I didn't know that about ie.

    I shall play about with it but I do know that I need to retain the js code as below so that more than one div can be presented if needed. ie, not just the one with the set name of 'pillows'.

    Code:
    toggleBox=document.getElementById(name);
    not
    Code:
    toggleBox=document.getElementById('pillows');
    bazz


  •  

    Posting Permissions

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