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
    Regular Coder
    Join Date
    Nov 2002
    Posts
    122
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Collapsible Table questions

    Using the below code, which does work, I was wondering if anyone knew of another such script that was more visually pleasing?


    Code:
      <SCRIPT LANGUAGE="JavaScript">
    // Row Hide function.
    function expandcontract(tbodyid,ClickIcon) {
    	if (document.getElementById(ClickIcon).innerHTML == "+"){
    		document.getElementById(tbodyid).style.display = "";
    		document.getElementById(ClickIcon).innerHTML = "-";
    	} else {
    		document.getElementById(tbodyid).style.display = "none";
    		document.getElementById(ClickIcon).innerHTML = "+";
    	}}
    </SCRIPT>
    
    <table width='100%' border='0' cellpadding='2' cellspacing='0' >
    <tr>
    <td width='2%' onclick="expandcontract('Row1','ClickIcon1')" id="ClickIcon1" style="cursor: pointer; cursor: hand;" colspan="6">
    +</td><td width='98%'>Comments by: &nbsp;tim</td>
    </tr>
    <tbody id='Row1' style='display:none'>
    <tr><td colspan='2'>ddddd ggg
    </td></tr></table>
    <table width='100%' border='0' cellpadding='2' cellspacing='0' >
    <tr>
    <td width='2%' onclick="expandcontract('Row2','ClickIcon2')" id="ClickIcon2" style="cursor: pointer; cursor: hand;" colspan="6">
    +</td><td width='98%'>Comments by: &nbsp;fff</td>
    </tr>
    <tbody id='Row2' style='display:none'>
    <tr><td colspan='2'>fff f f
    </td></tr></table>
    <table width='100%' border='0' cellpadding='2' cellspacing='0' >
    <tr>
    <td width='2%' onclick="expandcontract('Row3','ClickIcon3')" id="ClickIcon3" style="cursor: pointer; cursor: hand;" colspan="6">
    +</td><td width='98%'>Comments by: &nbsp;fff</td>
    </tr>
    <tbody id='Row3' style='display:none'>
    <tr><td colspan='2'>fff f f
    </td></tr></table>

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,276
    Thanks
    28
    Thanked 272 Times in 266 Posts
    That’s some ugly code alright: it contains invalid and non‐standard code, lacks indentation, contains inline CSS, and has gibberish for content. Try this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en-US">
      <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="Content-Script-Type" content="text/javascript">
    
        <title>CF 107302</title>
    
        <!-- Notes
          1. Separation of script, structure, and style has been sacrificed for Internet Explorer compatibility.
          -->
    
        <style type="text/css">
          * { margin: 0; padding: 0; }
          html { padding: 1em; }
          ul { list-style-type: none; }
          ul li span { cursor: pointer; }
          ul li span span { font-family: monospace; }
          ul ul { display: none; list-style: inside circle; padding-left: 1.2em; }
          ul ul.expanded { display: block; }
        </style>
    
        <script type="text/javascript">
          function view(object) {
            if (!object.parentNode.getElementsByTagName("ul")[0].className) {
              object.parentNode.getElementsByTagName("ul")[0].className = "expanded";
              object.firstChild.firstChild.data = "–";
              }
            else {
              object.parentNode.getElementsByTagName("ul")[0].className = "";
              object.firstChild.firstChild.data = "+";
              }
            }
        </script>
    
      </head>
      <body>
    
        <ul>
          <li><span onclick="view(this);"><span>+</span> Topic</span>
            <ul>
              <li>Sub‐Topic</li>
              <li>Sub‐Topic</li>
              <li>Sub‐Topic</li>
            </ul>
          </li>
        </ul>
        <ul>
          <li><span onclick="view(this);"><span>+</span> Topic</span>
            <ul>
              <li>Sub‐Topic</li>
              <li>Sub‐Topic</li>
              <li>Sub‐Topic</li>
            </ul>
          </li>
        </ul>
        <ul>
          <li><span onclick="view(this);"><span>+</span> Topic</span>
            <ul>
              <li>Sub‐Topic</li>
              <li>Sub‐Topic</li>
              <li>Sub‐Topic</li>
            </ul>
          </li>
        </ul>
    
      </body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    122
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Very clean code, thanx for sharing.


  •  

    Posting Permissions

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