warbird1405241485 0 Report post Posted November 10, 2005 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=- Share this post Link to post Share on other sites
miCRoSCoPiC^eaRthLinG 0 Report post Posted November 10, 2005 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. <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> Share this post Link to post Share on other sites
ruben1405241511 0 Report post Posted November 11, 2005 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. <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. <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. <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.. document.getElementById('moreinfo').style.display = 'none';You can call this function with the onclick-eventhandler on any element, that you can click (almost all) <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... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd 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! Share this post Link to post Share on other sites
iGuest 3 Report post Posted August 11, 2011 Replying to rubenThe code you gave me makes the page sort of reload and go back up to the top, which is no fun. -reply by Mari Share this post Link to post Share on other sites
