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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2002
    Location
    Malaysia
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show/Hide Form Sections On Click

    Hi, I wonder if Javascript can do this...

    As you can see in my attached form image, I have a huge form. Rather than showing all the sections (Part 1, Part 2...), I am thinking of allowing users to just click the title, e.g. Part 1a: Key Information and the section related to it will be shown, otherwise, if the user clicks the same title again, the section will be hidden again. This applies to all other parts.

    Thanks in advance for any help/reference for this.
    Attached Thumbnails Attached Thumbnails Show/Hide Form Sections On Click-form.jpg  

  • #2
    New Coder
    Join Date
    Aug 2002
    Location
    Malaysia
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm...I think I may have found what I want...in fact, in this CodingForums main page, there is a small minus/plus icon on each forum section. Clicking each will collapse or expand each section..

    Time to try the source code out.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Yes, see this example:

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
    <
    script>
    function 
    showF(f){
    if(
    document.getElementById(f).style.display=='none'){
    document.getElementById(f).style.display='inline';
    }
    else{
    document.getElementById(f).style.display='none';}
    }
    </script>
    </head>

    <body>
    <form>
      <a href="#" onclick="showF('f1');return false" style="position:relative">part 1</a><br>
      <div id="f1" style="position:relative;display:none">
        <table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
          <tr>
        <td><input type="checkbox" name="checkbox" value="checkbox"></td>
        <td><input type="checkbox" name="checkbox" value="checkbox"></td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkbox" value="checkbox"></td>
        <td><input type="checkbox" name="checkbox" value="checkbox"></td>
      </tr>
    </table>
    </div>
    <a href="#" onclick="showF('f2');return false" style="position:relative">part 2</a><br>
    <div id="f2" style="position:relative;display:none">
        <table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
          <tr>
        <td><input type="checkbox" name="checkbox" value="checkbox"></td>
        <td><input type="checkbox" name="checkbox" value="checkbox"></td>
      </tr>
      <tr>
        <td><input type="checkbox" name="checkbox" value="checkbox"></td>
        <td><input type="checkbox" name="checkbox" value="checkbox"></td>
      </tr>
    </table>
    </div>
    </form>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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