Jump to content

Show/Hide table?


Kristian_C
 Share

Recommended Posts

Hey, dont really know if this should go under PHP or JS but posting it here :) I have a table with bbcodes that onloads to the textarea, but i dont want it to be shown on the page all the time, so anyone here that can help me with a show/hide function.. like you click on a link and the table goes onto the site.

Link to comment
Share on other sites

<html><head><script>function changeBBCODE(){if(document.getElementById("my_table").style.display == "none"){document.getElementById("BBCODEchanger").innerHTML = "Click to hide";document.getElementById("my_table").style.display = "inline";}else if(document.getElementById("my_table").style.display == "inline"){document.getElementById("BBCODEchanger").innerHTML = "Click to show";document.getElementById("my_table").style.display = "none";}}</script></head><body><a href='java script: void(0)' id='BBCODEchanger' onclick='changeBBCODE()'></a></body></html>

Just make display either display 'inline' or 'none' by default.I think this works.

Link to comment
Share on other sites

Hi, I had a similar problem with my site. I have 3 <div> in a page and I want to make visible one of it alternative when user click on the corresponding button. <div id="attività"><p>....</p></div> <div id="tecnology"><p>....</p></div> <div id="product"><p>...</p></div>I used the following function to do thisfunction visible_div(id){ document.getElementById('attività').style.display="none"; document.getElementById('tecnology').style.display="none"; document.getElementById('product').style.display="none"; document.getElementById('main').style.display="none"; document.getElementById(id).style.display="inline";}that i call in the onClick event of the button. The result is that it work correctly on Firefox but not on Explorer 6. Someone can tell me why? "style.display" is not supported by Explorer?Thanks.

Link to comment
Share on other sites

If you want to make several buttons for each id then use this:

<html><head><script type='text/javascript'>function makeHide(id){document.getElementById(id).style.display = "none";}function makeShow(id){document.getElementById(id).style.display = "inline";}</script></head><body><a href='...' id='...'>....</a><input type='button' onclick='makeHide(...)' value='...'><input type='button' onclick='makeShow(...)' value='...'></body></html>

Change ... according to your document.Now, if you want to make all elements show/hide on the clicks, then use either of these codes.

<html><head><script type='text/javascript'>function hide(){document.getElementsById("your_id").style.display = "none";}function show(){document.getElementsById("your_id").style.display = "inline";}</script></head><body><input type='button' onlick='hide()' value='Hide'><input type='button' onclick='show()' value='Show'><a href='...' id='your_id'>...</a><a href='...' id='your_id'>...</a></body></html>

<html><head><script type='text/javascript'>function hide(){document.getElementsById("your_id1").style.display = "none";document.getElementsById("your_id1").style.display = "none";}function show(){document.getElementsById("your_id1").style.display = "inline";document.getElementsById("your_id2").style.display = "inline";}</script></head><body><input type='button' onlick='hide()' value='Hide'><input type='button' onclick='show()' value='Show'><a href='...' id='your_id'>...</a><a href='...' id='your_id'>...</a></body></html>

Good Luck!Oops, just change the <a> to your divs.

Link to comment
Share on other sites

  • 2 weeks later...

Hmm, im shure that this chould be to good help if you can to more with javascript then write the <script type='text/javascript'> </script>. But i really cant do so much more then that :).. Can you or someone else explain a bit better? ect write down how i should set up the table so it aint on page before i click show..I just copy'ed the one code u wrote and made a table and added id. but dident work so good :) hehe.. so help?!? :)

Link to comment
Share on other sites

heh. I'll give it a try.Here's some HTML:

<html><head><style type="text/css">#mytable { display: none; }</style><script type="text/javascript">function displayTable(){    document.getElementById("mytable").style.display = "block";}</script></head><body><div id="mytable">  <table cellspacing="0" cellpadding="0" border="0">    <tr><td>hello</td></tr>  </table></div><button onclick="displayTable();">Display Table</button></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...