Text appears on title click

**daveago_forlan** · 06-06-2009 04:28 PM

Hi all

I've been looking around for a script which would allow me to show text on a page next to a title when the title is clicked. I've happened upon this code which places text below each title.

The problem is that the text appears below each individual title and I am looking to create an effect where each link makes a paragraph of text appear in the same space by the text (so that only one paragraph of text is visable at one time, depending on which link is clicked)

I'd be gratefull for any suggestions anyone has!

my current code is below but I'm not sure if this is a dead end and I'll need to take another approach

Code:

<head>
<script language="javascript">
function toggleDiv(id)
{
   var div = document.getElementById(id);
   var current = div.style.display;
   
   if (current == 'none')
      div.style.display = 'block';
   else
      div.style.display = 'none';
if (current == 'none')
      div.style.display = 'block1';
   else
      div.style.display = 'none';
      
}
</script>
</head>

<body>
<a href="javascript:toggleDiv('block');">Toggle Block</a>
        <a href="javascript:toggleDiv('block1');">Toggle Block</a>
        
                
                <div id="block" style="display: none">This is my Block</div>
                <div id="block1" style="display: none">This is my Block</div>
</body>

thanks in advance

**jam** · 06-07-2009 09:44 AM

Hey it's hard to understand what you want to do from this. Could you give us an idea of why this script you currently have isn't what you want? (just so we have somewhere to go from)...

Do you want to do something like this?:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<script language="javascript">
		function toggleDiv(id, content)
		{
			 var div = document.getElementById(id);
			 div.style.display = "block";
			 div.innerHTML = content;	 	
		}
		</script>
	</head>

	<body>
		<a href="javascript:toggleDiv('block', 'this is the first content//block');">Toggle Block</a>
		<a href="javascript:toggleDiv('block', 'this is the second content//block');">Toggle Block</a> 
		<div id="block" style="display: none">randomstartcontent</div>
	</body>
</html>

basically only have one paragraph of text visible? (This can be done in way many more ways, the above is just a quick mashup to work out what you actually want to do)

Cheers,
Jamey

**daveago_forlan** · 06-09-2009 03:49 PM

Thats it, thanks for your help.

The problem with my origional code was that I only wanted it to show one paragraph of text at a time (the one associated with the link the user clicked). the origional code just stacked the paragraphs if more than one link/button was clicked.

Thanks again

Dave

**jam** · 06-09-2009 04:24 PM

Yeah i get the problem.

Glad to be of help.

Cheers,
Jamey

Thread: Text appears on title click

Thread Tools

Display

Text appears on title click

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions