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

Thread: Hiding table.

  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hiding table.

    How do I hide a table?

    My Javascript :
    Code:
    <script language=javascript type='text/javascript'>
    function showdiv() {
    if (document.getElementById) { // DOM3 = IE5, NS6
    document.getElementById('hideshow').style.visibility = 'visible';
    }
    else {
    if (document.layers) { // Netscape 4
    document.hideshow.visibility = 'visible';
    }
    else { // IE 4
    document.all.hideshow.style.visibility = 'visible';
    }
    }
    }
    </script>
    My PHP to make hiden part visible :
    Code:
    <a href="javascript:showdiv()"><img src="login.png"></a>
    My PHP table i want to hide :
    Code:
    <div id="hideshow" style="visibility: hidden">
    		<table cellpadding="0" cellspacing="3">
    			<tbody><tr>
    				<br><br><br><label for="loginuser"><strong>Select your recovery question :</strong> </label></td>
    				<td align="left">
    <select size="1" name="question"><option selected 
      value="What is your mother's maiden name?">What is your mother's maiden 
      name?</option> <option value="What was the name of your first school?">What 
      was the name of your first school?</option> <option 
      value="Who is your favorite super hero?">Who is your favorite super 
      hero?</option> <option value="What is the name of your first pet?">What is the 
      name of your first pet?</option> <option 
      value="What place did you like to visit as child?">What place did you like to 
      visit as child?</option> <option 
      value="Who is your favorite cartoon character?">Who is your favorite cartoon 
      character?</option> <option 
      value="What was the first name of your first teacher?">What was the first name 
      of your first teacher?</option> <option 
      value="What TV show did you like as a child?">What TV show did you like as a 
      child?</option> <option value="What city was your mother born in?">What city 
      was your mother born in?</option> <option 
      value="What is your favorite movie?">What is your favorite movie?</option> 
      <option value="What city were you born in?">What city were you born 
      in?</option> &lt;\SELECT&gt;</select>
    <label for="loginpass"><strong>Awnser:</strong> </label></td>
        </td></div>
    			</tr>
    			<tr>
    				</td>
    				<td align="left"><input name="loginpass" id="loginpass" maxlength="10" tabindex="2" accesskey="p" style="width: 150px;" type="password"></td>
    			</tr>
    			<tr>
    				<td></td>
    				<td style="line-height: 18px; text-align: left;">
    					<span class="size10"><button type="submit" name="loginsubmit" id="loginsubmit" tabindex="6" class="button">Save</button></b></a></span>
    					<br>
    
    			</tr>
    		</tbody></div>
    but all it does is just hide 1 part.
    how can i make the whole table hiden? and when i click the javascript image it will all appears.?

    bad english im sorry.

  • #2
    New Coder
    Join Date
    May 2010
    Posts
    69
    Thanks
    3
    Thanked 10 Times in 10 Posts
    Code:
    <script language=javascript type='text/javascript'>
    function showdiv() {
    if (document.getElementById) { // DOM3 = IE5, NS6
    document.getElementById('hideshow').style.display = 'block';
    }
    else {
    if (document.layers) { // Netscape 4
    document.hideshow.display = 'block';
    }
    else { // IE 4
    document.all.hideshow.style.display = 'block';
    }
    }
    }
    </script>
    (looks cleaner as people without javascript will just see a link that goes to the top of the page)
    Code:
    <a href="#" onclick="showdiv(); return false"><img src="login.png"></a>
    Code:
    <div id="hideshow" style="display:none"> [...] </div>
    Note that people without javascript will not be able see the form at all. Also, validate your HTML code. There's a lot of errors in it (such as closing div's nested in a table row).

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the reply but this just makes 1 thing hiden.

    now my dropdown box is hiden. but i want the table to be hiden.
    ------------------------------------

    I tried a diffrent code, it will make the whole table disapear.
    but when you load the page its still there, untill i click the button then it disapear, but i want it vice versa ( srry translated that with google ).

    I want to start the table invisible and when i click the image ( button ) it will become visible.

    My PHP table :
    Code:
    <table id="hintzTable" table cellpadding="4" cellspacing="10">
    <br><br><br><label for="loginuser"> </label></td><div id="hideshow" style="display:none">
    				<td align="right"><label for="anwser"><strong>    </strong></label></td><td align="middle">
          <p>
    <br><strong>Select your recovery question 
          :</strong><br><br><select size="1" name="question"><option selected 
      value="What is your mother's maiden name?">What is your mother's maiden 
      name?</option> <option value="What was the name of your first school?">What 
      was the name of your first school?</option> <option 
      value="Who is your favorite super hero?">Who is your favorite super 
      hero?</option> <option value="What is the name of your first pet?">What is the 
      name of your first pet?</option> <option 
      value="What place did you like to visit as child?">What place did you like to 
      visit as child?</option> <option 
      value="Who is your favorite cartoon character?">Who is your favorite cartoon 
      character?</option> <option 
      value="What was the first name of your first teacher?">What was the first name 
      of your first teacher?</option> <option 
      value="What TV show did you like as a child?">What TV show did you like as a 
      child?</option> <option value="What city was your mother born in?">What city 
      was your mother born in?</option> <option 
      value="What is your favorite movie?">What is your favorite movie?</option> 
      <option value="What city were you born in?">What city were you born 
      in?</option> &lt;\SELECT&gt;</select></p>
          <p align="left">
    <label for="loginpass"><strong>Awnser:</strong> </label></p>
          <p align="left">
    <label for="loginpass">&nbsp;<input name="loginpass" id="loginpass" maxlength="10" tabindex="2" accesskey="p" style="WIDTH: 150px" type="password">
    					<span class="size10"><button type="submit" name="loginsubmit" id="loginsubmit" tabindex="6" class="button">Save</button></span> </label></p></td></td>
    			</tr>
    			<tr></td>
    				<td align="left"></td>
    			</tr>
    			<tr>
    				<td></td>
    				<td style="LINE-HEIGHT: 18px; TEXT-ALIGN: left">
    					<span class="size10"></b></a></span>&nbsp;
    					<br></td>
    
    			</tr>
    		</tbody>
      <div></div></table></body></html>
    My javascript :
    Code:
    <script type="text/javascript">
    		function tableHide(){
    			document.getElementById("hintzTable").style.display = "none";
    		}
    		function tableShow(){
    			document.getElementById("hintzTable").style.display = "block";
    		}
    		function tableHideV(){
    			document.getElementById("hintzTable2").style.visibility = "hidden";
    		}
    		function tableShowV(){
    			document.getElementById("hintzTable2").style.visibility = "visible";
    		}
    		function tableHideX(){
    			var rows = document.getElementsByTagName("tr");
    			if(document.getElementById("ButtonText").innerHTML == "Hide Bottom"){
    				document.getElementById("ButtonText").innerHTML = "Show Bottom";
    				for(i=0; i<rows.length; i++){
    					if(rows[i].className == "hideable")
    						rows[i].style.display = "none";
    				}
    			}else{
    				document.getElementById("ButtonText").innerHTML = "Hide Bottom";
    				for(i=0; i<rows.length; i++){
    					if(rows[i].className == "hideable")
    						rows[i].style.display = "table-row";
    				}
    			}			
    		}		
    </script>
    Last edited by xtreempje; 05-15-2010 at 03:57 PM.


  •  

    Posting Permissions

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