SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    I'm not a human
    Join Date
    Aug 2006
    Location
    India
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to show/hide tables dynamically?

    Hi ,

    I'm having a page with two tables inside a table. The two tables inside the main table has unique ids.

    I have two buttons as show and hide.

    What i want do is , when i click the show button the contents of the first table should be visible and when i click the hide button the contents of the first table should hide and important thing is that the second table should be dynamically placed in accordance with the first one.

    Here is the codings.

    Code:
    <script language=javascript>
    function show()
    {
    	var tbl = document.getElementById('default');
    	tbl.style.visibility = visible;
    }
    
    function hide()
    {
    	var tbl = document.getElementById('default');
    	tbl.style.visibility = collapse;
    }
    </script>
    
    
    <center>
    <table border=01 width=80% height=100%>
    <tr><td>
         <div align=left>
           <img src='' title="Click to Show" style="cursor:pointer;" onclick=show()>
           <img src='' title="Click to Hide accounts" style="cursor:pointer;" onclick=hide()>
         </div>
    
         <table id='default' border=0 cellpadding=0 cellspacing=1 style="font-size: 14px; font-family: arial; visiblity:hidden;"> 
           <tr>
    		 <!-- some php code here-->
       	 </tr>
    	 </table>
    	 <br>
           <table border=0 cellpadding=0 cellspacing=1 style="font-size: 14px; font-family: arial; position:relative;"> 
            <tr><th height=25 align=left>User Created</th></tr>
            <tr height=20>
                <!-- some php code here-->
            </tr>
    	 </table>
    
    </td></tr>
    <tr align=center height=35><td colspan=4 halign=center><input class=frmbtn name=add type=submit onClick=''></td></tr>
    </table>
    
    </center>
    Pls help me to sort it out.
    Regards,
    Vijay
    Follow me on twitter @vijaycbe
    World Holiday Calander || My Cricket Blog

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    5 Thread(s)
    quite new to this but I think you need to wrap your function in parentheses.

    Code:
    onclick='hide()'
    Like I said I'm not positive but, that could be it.

  3. #3
    I'm not a human
    Join Date
    Aug 2006
    Location
    India
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi ,

    i tried those things ,there's no problem.

    Even the functions are working and they are hiding and showing ,
    but the tables are not aligned dynamically ..

    (i.e) when the form loads the two tables are shown,
    when i click hide the table it hides the table but an empty space is created there and then the second table appers below. What i want is the second table should go up and
    when i click the show the table it should done in reverse..
    Regards,
    Vijay
    Follow me on twitter @vijaycbe
    World Holiday Calander || My Cricket Blog

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    5 Thread(s)
    ahh…

    The visibility style does not take an element out of the flow of the document.

    Therefor, you would want to use the display style and set it to none. This will hide the element and also take it out of the flow of the document.

    Try that.

  5. #5
    I'm not a human
    Join Date
    Aug 2006
    Location
    India
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ,

    that worked nice and good.
    thx
    Regards,
    Vijay
    Follow me on twitter @vijaycbe
    World Holiday Calander || My Cricket Blog


Bookmarks

Posting Permissions

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