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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    57
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Show/hide tables

    Hello,

    I need help with the following scenario.

    When someone arrives at my site I want certain tables to be displayed by default and others hidden. On each one of them I want there to be an image that will be a plus sign (eg. plus.png) for the hidden ones and a minus sign (eg. minus.png) for the shown ones.

    When someone for example clicks on the plus.png image on a hidden table I want the table to show itself and the image to change to the minus.png one.

    How can I do this?

    Thank you!

  • #2
    Regular Coder
    Join Date
    Apr 2009
    Posts
    264
    Thanks
    24
    Thanked 1 Time in 1 Post
    Quote Originally Posted by electrify77 View Post
    Hello,

    I need help with the following scenario.

    When someone arrives at my site I want certain tables to be displayed by default and others hidden. On each one of them I want there to be an image that will be a plus sign (eg. plus.png) for the hidden ones and a minus sign (eg. minus.png) for the shown ones.

    When someone for example clicks on the plus.png image on a hidden table I want the table to show itself and the image to change to the minus.png one.

    How can I do this?

    Thank you!
    Try AJAX

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    57
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks but I know it's not AJAX... it's some JS I just don't know how exactly it works.

  • #4
    New Coder
    Join Date
    Jan 2007
    Posts
    57
    Thanks
    11
    Thanked 0 Times in 0 Posts
    OK. Here's a short example I managed to scrape...

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    </head>
    
    <body>
    
    <script language="javascript">
    function show_box()
    {
    	var id_Box = document.getElementById('box');
    	
    	if (id_Box.style.display == 'none')
    	{
    		id_Box.style.display = 'block';	
    	}
    	else
    	{
    		id_Box.style.display = 'none';
    	}	
    }
      </script>
    
              <p><a href="javascript:show_box();">LINK</a><p>&nbsp;</p>
              
              <table id="box" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
                <tr>
                  <td width="100%">dfdfdfdfd</td>
                </tr>
              </table>
              <p>&nbsp;</body></html>
    The question is how can I make the Link be an image that changes - eg. when the table is shown the image should be minus.png and when the table is hidden it should be plus.png...

    Any ideas?

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    57
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Common - someone must know...


  •  

    Posting Permissions

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