 Hiding/showing Text On Click, is it possible with css/javascript |
|
|
|
|
  |
 Nov 10 2005, 01:15 PM
Post
#1
|
|
|
Little MechBirdie  Group: Members Posts: 299 Joined: 23-March 05 From: Down here in Holland Member No.: 3,178  |
Ok, I got an question: I want to make a site with a news box or something similar. It's gonna be a table with a small piece of text and an "read more" button. Now I want to make it so that if people click on the "read more" there will appear an other piece of text underneath it. How do I do this?
thanks in advance, -=jeroen=- |
 |
 
|
|
Nov 10 2005, 01:52 PM
Post
#2
|
|
|
PsYcheDeLiC dR3aMeR  Group: Admin Posts: 2,242 Joined: 29-January 05 From: Nakorn Chaisri, Thailand Member No.: 2,411 |
Here's a simple JavaScript code that will show/hide a div when clicked. Simply link this with a button instead of the text in the SPAN tag. This is the code used for the SPOILER BBCode. This can achieve the effect you're seeking with just minor adjustments.
CODE <script type='text/javascript'> mytagid = Math.floor( Math.random() * 100 ); document.write("<div style='margin: 3px;padding:4px;background:#fff;border:1px dotted #386898'> <div id='"+mytagid+"_closed' style='display:none'> .... This is the text I want to hide/show ........ </div> <br /> <a href='#' onclick='toggleview("+'"'+mytagid+'_closed'+'"'+"); return false;'> <span style='font-size:smaller'>Read More...</span></a></div>"); document.close(); </script> |
|
|
|
 Nov 11 2005, 03:28 PM
Post
#3
|
|
|
Wheeeeeeee! Group: Members Posts: 245 Joined: 19-October 05 From: DG, Belgium Member No.: 9,200 |
Hi,
I believe m^e's code won't work, since he forgot to include the script for the toggleview() function code. It is also a bit too complicated for what you want. Oh and all the document.write things have to be in one line, otherwise you'll get an "unterminated string literal" error. Let's do this extensively ^^ To hide an HTML element, you just have to include the attribute style with no-display. CODE <div style="display:none"> This means that the <div> is not there at all. If you want to make it invisible, but keep the space as placeholder, then you would use "visibility: hidden" instead of "display: none". Since some browsers do not support Javascript/users turned it off, the field should be shown by default. If you don't care about those without JS, then hide the div by default. CODE <div><script type="text/javascript"><!-- document.write("<div style='display:block' id='moreinfo'>"); //--> </script>More Info, shown for those without Javascript<script type="text/javascript"><!-- document.write("</div>"); //--></script></div> This way, the div will be shown to the users which have JS disabled, but it will be directly hidden from the ones with document.write-supporting browsers (nearly all). It's a lot of action for those few users without Javascript, but you should not neglect them. If you intend to do so, then do it directly. CODE <div style="display:none" id="moreinfo">More Info, shown for those without Javascript</div> like this. But from now on, the code for the JS-browsers Now, let's show this div :-) you need only one simple JS-command for this purpose.. CODE document.getElementById('moreinfo').style.display = 'none'; You can call this function with the onclick-eventhandler on any element, that you can click (almost all) CODE <a href="#" onclick="document.getElementById('moreinfo').style.display = 'block';">Show me what you got</a> So, in the end your document would look something like this... CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Untitled Page</title> </head> <body> <p><a href="#" onclick="document.getElementById('moreinfo').style.display = 'block';">Show me what you got</a></p> <div><script type="text/javascript"><!-- document.write("<div style='display:none' id='moreinfo'>"); //--> </script>More Info, shown for those without Javascript<script type="text/javascript"><!-- document.write("</div>"); //--></script></div> </body> </html> works a 100%, I tried it out. Good luck, feel free to ask back! |
|
|
|
|
Similar Topics
|
Lo-Fi Version | Time is now: 22nd August 2008 - 05:28 AM |