www.webdeveloper.com
Results 1 to 4 of 4

Thread: Text appears on title click

  1. #1
    Join Date
    Sep 2003
    Posts
    8

    Talking Text appears on title click

    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

  2. #2
    Join Date
    Aug 2005
    Location
    Northampton, UK.
    Posts
    421
    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

  3. #3
    Join Date
    Sep 2003
    Posts
    8
    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

  4. #4
    Join Date
    Aug 2005
    Location
    Northampton, UK.
    Posts
    421
    Yeah i get the problem.

    Glad to be of help.

    Cheers,
    Jamey

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles