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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    show/hide content help

    hi, ive created a series of expanding/collapsing tables using javascript, and as it is, you have to click each one individually to show/hide it. im looking for a way to collapse any open table when you click on a new one, so that its only possible to view one table at a time.
    thanks,
    -trevor

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    when clicking on a table set the following:
    Code:
    <table onclick="fnClick(this)"></table>
    < script >
    var curTable = null;
    
    function fnClick(zTable)
    {
       if(curTable == null)
      {
         // this means that there is no open table
         // open the table by using the way you are doing
      }
      else  // there is currently a selected table
      {
         if(zTable == curTable) // you have clicked on the table that is open
         {
            // in this case I do not know what you want to do. maybe close the table
         }
         else
        {
         // close curtable that is the current open table
         // open zTable that is the reference to the table you have just clicked on
         }
      }
      curTable = zTable; 
      // after you finish all your tests you set the current selected table the one that you     //last clicked on it.
      
    }
    </script>

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks for the post, im not familiar enough with javascript yet and am still having trouble getting it to work, i originally had a code something along the lines of this, i appreciate the help.
    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <script language="Javascript" type="text/javascript">
    <!--
    	function show_hide(tblid, show) {
    		if (tbl = document.getElementById(tblid)) {
    			if (null == show) show = tbl.style.display == 'none';
    			tbl.style.display = (show ? '' : 'none');
    		}
    	}
    //!-->
    </script>
    </head>
    <body>
     <a href="javascript:void();" onclick="show_hide('table1')">+/-table 1</a></td>
             <table id="table1" style="display:none;">
    	  <tr><td>contentcontentcontentcontentcontentcontentcontentcontent
        </td></tr>
    </table>
    <a href="javascript:void();" onclick="show_hide('table2')">+/-table 2</a></td>
             <table id="table2" style="display:none;">
            <tr><td>contentcontentcontentcontentcontentcontentcontent
              </td></tr>
    </table>
    <a href="javascript:void();" onclick="show_hide('table3')">+/-table 3</a></td>
             <table id="table3" style="display:none;">
            <tr><td>contentcontentcontentcontentcontentcontentcontent
              </td></tr>
    </table>
    </body>
    </html>

  • #4
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Try this:

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <script language="Javascript" type="text/javascript">
    <!--
    	function show_hide(tblid) 
          {
    		if (tbl = document.getElementById(tblid)) 
                   {
                            var show = (tbl.style.display == "none");
    			tbl.style.display = (show ? "" : "none");
    		}
    	}
    //!-->
    </script>
    </head>
    <body>
     <a href="#" onclick="show_hide('table1')">+/-table 1</a></td>
             <table id="table1" style="display:none;">
    	  <tr><td>contentcontentcontentcontentcontentcontentcontentcontent
        </td></tr>
    </table>
    <a href="#" onclick="show_hide('table2')">+/-table 2</a></td>
             <table id="table2" style="display:none;">
            <tr><td>contentcontentcontentcontentcontentcontentcontent
              </td></tr>
    </table>
    <a href="#" onclick="show_hide('table3')">+/-table 3</a></td>
             <table id="table3" style="display:none;">
            <tr><td>contentcontentcontentcontentcontentcontentcontent
              </td></tr>
    </table>
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i appreciate all the help but the tables still all stay open when i click a new one :S

  • #6
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Code:
    function show_hide(tblid)
          {
    
    
                   var allTbls = document.getElementsByTagName("table");
                    for(var i=0; i<allTbls.length; i++)
                    {
                          var tbl = document.getElementById(allTbls[i].id);
                          if(allTbls[i].id == tblid)
                         {
                            var show = (tbl.style.display == "none");
    			tbl.style.display = (show ? "" : "none");
                         }
                         else
                         {
                             tbl.style.display = "none";
                         }
                     }
    
    	}

  • Users who have thanked ckeyrouz for this post:

    trevxcore (07-16-2009)

  • #7
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    awesome! thanks so much!

  • #8
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    one more thing, if i place these collapsing tables within a larger table they no longer work what would be the fix for this?

  • #9
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Post code to see what's happening.

  • #10
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    im just using the code you suggested it works perfect on its own but if i place the collapsing tables within a preexisting or larger table the it no longer functions, and i was wondering if you had a suggestion for this?

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <script language="Javascript" type="text/javascript">
    <!--
    function show_hide(tblid)
          {
    
    
                   var allTbls = document.getElementsByTagName("table");
                    for(var i=0; i<allTbls.length; i++)
                    {
                          var tbl = document.getElementById(allTbls[i].id);
                          if(allTbls[i].id == tblid)
                         {
                            var show = (tbl.style.display == "none");
    			tbl.style.display = (show ? "" : "none");
                         }
                         else
                         {
                             tbl.style.display = "none";
                         }
                     }
    
    	}
    //!-->
    </script>
    </head>
    <body>
    <table>
    
     <a href="#" onclick="show_hide('table1')">+/-table 1</a></td>
             <table id="table1" style="display:none;">
    	  <tr><td>contentcontentcontentcontentcontentcontentcontentcontent
        </td></tr>
    </table>
    <a href="#" onclick="show_hide('table2')">+/-table 2</a></td>
             <table id="table2" style="display:none;">
            <tr><td>contentcontentcontentcontentcontentcontentcontent
              </td></tr>
    </table>
    <a href="#" onclick="show_hide('table3')">+/-table 3</a></td>
             <table id="table3" style="display:none;">
            <tr><td>contentcontentcontentcontentcontentcontentcontent
              </td></tr>
    </table>
    
    </table>
    </body>
    </html>

  • #11
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    The point is the main table does not have an id and the method is throwing a script error.
    Modify your function like this:



    Code:
    function show_hide(tblid)
          {
    
    
                   var allTbls = document.getElementsByTagName("table");
                    for(var i=0; i<allTbls.length; i++)
                    {
                          var tbl = document.getElementById(allTbls[i].id);
                          if(tbl != null)
                          {
                               if(allTbls[i].id == tblid)
                               {
                                    var show = (tbl.style.display == "none");
    			         tbl.style.display = (show ? "" : "none");
                               }
                               else
                               {
                                      tbl.style.display = "none";
                               }
                         }
                     }
    
    	}


  •  

    Posting Permissions

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