Hiding/showing Text On Click

warbird

Nov 10 2005, 01:15 PM

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=-

Comment/Reply (w/o sign-up)

miCRoSCoPiC^eaRthLinG

Nov 10 2005, 01:52 PM

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

Comment/Reply (w/o sign-up)

ruben

Nov 11 2005, 03:28 PM

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

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">
</script>More Info, shown for those without Javascript<script type="text/javascript"></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

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">
</script>More Info, shown for those without Javascript<script type="text/javascript"></script></div>
</body>

</html>

works a 100%, I tried it out.
Good luck, feel free to ask back!

Comment/Reply (w/o sign-up)

Hiding/showing Text On Click - is it possible with css/javascript

Hiding/showing Text On Click - is it possible with css/javascript