Kristian_C Posted December 23, 2006 Share Posted December 23, 2006 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 More sharing options...
Webworldx Posted December 23, 2006 Share Posted December 23, 2006 Just give the table you want to show/hide an id, then use:document.getElementById('my_table').style.display="inline";or .. ="none";in a function to hide it again. Link to comment Share on other sites More sharing options...
Sniffy Posted December 23, 2006 Share Posted December 23, 2006 <a href="java script: document.getElementById('my_table').style.display = 'none';">Click to display BBCODE.</a> Link to comment Share on other sites More sharing options...
Webworldx Posted December 23, 2006 Share Posted December 23, 2006 Well, you don't want to display: none if you're clicking "display BBCODE", but yes - that idea, maybe a little more advanced so the same link shuffles between show and hide. Link to comment Share on other sites More sharing options...
Sniffy Posted December 23, 2006 Share Posted December 23, 2006 <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 More sharing options...
dsci2000 Posted December 24, 2006 Share Posted December 24, 2006 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 More sharing options...
Sniffy Posted December 24, 2006 Share Posted December 24, 2006 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 More sharing options...
Kristian_C Posted January 4, 2007 Author Share Posted January 4, 2007 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 More sharing options...
jesh Posted January 4, 2007 Share Posted January 4, 2007 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 More sharing options...
Kristian_C Posted January 5, 2007 Author Share Posted January 5, 2007 Thanks jesh Thats a little bit more simple code that i can understand hehe And thanks to you to Webworldx and Sniffy -> Kristian_C. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now