Jump to content
xisto Community
warbird1405241485

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

Recommended Posts

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

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

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

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

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.