Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

More Text Javascript

Status
Not open for further replies.
digatle

digatle

Technical User
Oct 31, 2003
85
US
I'm looking for the javascript that when you clicked on certain text it would open up more text or another paragraph. Click it again and it would close the paragraph. I've gone to several javascript houses however I don't know what it's called.

Digatle
 
Sort by date Sort by votes
Digatle,

Try this:

Code: 
<HTML>
<HEAD>

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
	var displayFlag = false;
	var paraObj;

	function toggleParagraph()
	{
		displayFlag = !displayFlag;
		if (displayFlag) paraObj.style.display = 'block'; else paraObj.style.display = 'none';
		
	}
//-->
</SCRIPT>

</HEAD>
<BODY onLoad=&quot;paraObj = document.getElementById('myPara');&quot;>

Click <A HREF=&quot;javascript:toggleParagraph();&quot;>here</A> to toggle text<BR><BR>

<DIV ID=&quot;myPara&quot; STYLE=&quot;display:none&quot;>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vitae augue.<BR><BR></DIV>

<BR>This is just footer text...

</BODY>
</HTML>

Hope this helps!

Dan
 
Upvote 0 Downvote
That's exactly what I was looking for. Thanks Dan.

Digatle
 
Upvote 0 Downvote
Hey by chance is there a way to say something like &quot;expand&quot; and it expands like it does but then change expand to contract so they know they can click that to contract the paragraph?

Digatle
 
Upvote 0 Downvote
Digatle,

Here's a modified version of my code:

Code: 
<HTML>
<HEAD>

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
    var displayFlag = false;
    var paraObj, toggleObj;

    function toggleParagraph()
    {
        displayFlag = !displayFlag;
        if (displayFlag)
		{
			paraObj.style.display = 'block';
			toggleObj.firstChild.nodeValue = &quot;contract&quot;;
		}
			else
		{
			paraObj.style.display = 'none';
			toggleObj.firstChild.nodeValue = &quot;expand&quot;;
		}        
    }

	function setupVars()
	{
		paraObj = document.getElementById('myPara');
		toggleObj = document.getElementById('toggleWord');
	}

//-->
</SCRIPT>

</HEAD>
<BODY onLoad=&quot;setupVars();&quot;>

Click <A HREF=&quot;javascript:toggleParagraph();&quot;>here</A> to <SPAN ID=&quot;toggleWord&quot;>expand</SPAN> text<BR><BR>

<DIV ID=&quot;myPara&quot; STYLE=&quot;display:none&quot;>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vitae augue.<BR><BR></DIV>

<BR>This is just footer text...

</BODY>
</HTML>

Hope this is helpful to you!

Dan
 
Upvote 0 Downvote
Nice. Is there a way to do more than one?

Digatle
 
Upvote 0 Downvote
Digatle,

Here you go:

Code: 
<HTML>
<HEAD>

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--

    function toggleParagraph(paraName)
    {
		var paraObj = document.getElementById(paraName);
		var paraTextObj = document.getElementById(paraName + 'Word');
		var paraDisplayedFlag = (paraObj.style.display == 'block');

        if (paraDisplayedFlag)
		{
			paraObj.style.display = 'none';
			paraTextObj.firstChild.nodeValue = &quot;expand&quot;;
		}
			else
		{
			paraObj.style.display = 'block';
			paraTextObj.firstChild.nodeValue = &quot;contract&quot;;
		}
    }

//-->
</SCRIPT>

</HEAD>
<BODY>

Click <A HREF=&quot;javascript:toggleParagraph('myPara1');&quot;>here</A> to <SPAN ID=&quot;myPara1Word&quot;>expand</SPAN> paragraph 1<BR><BR>
<DIV ID=&quot;myPara1&quot; STYLE=&quot;display:none&quot;>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vitae augue.<BR><BR></DIV>

Click <A HREF=&quot;javascript:toggleParagraph('myPara2');&quot;>here</A> to <SPAN ID=&quot;myPara2Word&quot;>expand</SPAN> paragraph 2<BR><BR>
<DIV ID=&quot;myPara2&quot; STYLE=&quot;display:none&quot;>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vitae augue.<BR><BR></DIV>

Click <A HREF=&quot;javascript:toggleParagraph('myPara3');&quot;>here</A> to <SPAN ID=&quot;myPara3Word&quot;>expand</SPAN> paragraph 3<BR><BR>
<DIV ID=&quot;myPara3&quot; STYLE=&quot;display:none&quot;>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vitae augue.<BR><BR></DIV>

<BR>This is just footer text...

</BODY>
</HTML>

Of course, you have to follow the naming structure for this to work, i.e. You can give the paragraphs any ID you want, but the expand/contract SPANs must have the same ID with the word 'Word' immediately afterwards (unless, of course, you edit the JavaScript).

Incidentally, what are you building with this? It would be nice to be able to see my code sitting nicely inside a webpage ;o)

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
829
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
414
Daniel K
Daniel K
Marclem
  • Locked
  • Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
408
Marclem
Marclem
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
804
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top