Welcome to WebmasterWorld Guest from 35.175.191.168

Forum Moderators: open

Message Too Old, No Replies

Expand/collapse text without separate js file

Warning ... Newbie question!

     
5:59 pm on Nov 10, 2008 (gmt 0)

New User

10+ Year Member

joined:Nov 10, 2008
posts: 5
votes: 0

Hello all -

I'm new so please be easy on me ;^D

I found a couple of posts on this site related to what I need, however, they say they are too old for me to post a reply to, so I had to create this new one.

I have html skills (but have virtually no javascript skills), so I'm hoping the group can help me. I need to have a paragraph of text that expands down when the user clicks on the heading for the paragraph, and collapses when the user clicks the heading for the paragraph again. And I do not have access to place any js files on the server, so I am unable to use a separate js file on the server side to do it.

So, I found the code below that does ALMOST exactly what I need ... the one thing it doesn't do that I must have is for the text to be initially hidden (collapsed) when the page loads. Can someone please tell me how to modify the code below to have the text start off as hidden/collapsed?

Thanks in advance.
_______________________________________________________________________________

<script type="text/javascript">
<!--
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}

function hide(){
document.getElementById("toggle").style.display='none';
}
//-->
</script>
<body onload="hide();">
<a onclick="switchMenu('toggle');" title="Test">Click Me</a><br><div id="toggle">This text toggles when Click Me is clicked.</div>

7:48 pm on Nov 10, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


Well, ideally you'll want to make sure that all of the items are shown by default for people with JavaScript disabled, which means that your method for hiding them by default should be done with JavaScript. Here's one method that would work:

Have JavaScript write out some additional style rules to hide the text.


<script type="text/javascript">
document.write('<style type="text\/css">#toggle { display: none; }<\/style>');
</script>
7:52 pm on Nov 10, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


Actually, that won't work because your other JavaScript code is setting display to '' instead of something like 'block'. If your toggle method set it to 'none' or 'block' instead of 'none' or '', then this method would work.

Oh, and welcome to WebmasterWorld! :)

[edited by: Fotiman at 7:53 pm (utc) on Nov. 10, 2008]

10:48 pm on Nov 10, 2008 (gmt 0)

New User

10+ Year Member

joined:Nov 10, 2008
posts: 5
votes: 0


Thanks so much!

So please forgive me for how newbie I am ... I don't understand if you're saying I need to add your code to what I already have, or if I'm supposed to replace my code with what you have given me.

Could you possibly edit the code I already have, with your recommended change(s)? I would REALLY appreciate it.

2:51 pm on Nov 11, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


Sure, I was suggesting to add it to what you have. So:


<script type="text/javascript">
document.write('<style type="text\/css">#toggle { display: none; }<\/style>');
</script>
<script type="text/javascript">
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = 'block';
}
}
function hide() {
document.getElementById("toggle").style.display='none';
}
</script>
<body onload="hide();">
<a onclick="switchMenu('toggle');" title="Test">Click Me</a><br><div id="toggle">This text toggles when Click Me is clicked.</div>

[edited by: Fotiman at 2:54 pm (utc) on Nov. 11, 2008]

2:52 pm on Nov 11, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


Note, I removed some of the unnecessary items like the comment tags:
<!--
//-->
3:29 pm on Nov 11, 2008 (gmt 0)

New User

10+ Year Member

joined:Nov 10, 2008
posts: 5
votes: 0


Great ... thank you!

It now works as desired, except ... for some reason, I have to click the "Click Me" link twice to get it to expand the first time. After that, each click toggles the text on or off.

Also, IE7 throws an error upon page load in the status bar that says "Unterminated string constant" ... any idea what that might be?

3:52 pm on Nov 11, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


I'm not seeing that behavior. Clicking the link once opens it for me, also, I don't see any errors in IE7. Perhaps there was a problem cutting and pasting, or maybe you have something else on the page causing a problem? Here's a complete working example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Untitled</title>
<script type="text/javascript">
document.write('<style type="text\/css">#toggle { display: none; }<\/style>');
</script>
<script type="text/javascript">
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = 'block';
}
}
function hide() {
document.getElementById("toggle").style.display='none';
}
</script>
</head>
<body onload="hide();">
<a onclick="switchMenu('toggle');" title="Test">Click Me</a><br><div id="toggle">This text toggles when Click Me is clicked.</div>
</body>
</html>
4:42 pm on Nov 11, 2008 (gmt 0)

New User

10+ Year Member

joined:Nov 10, 2008
posts: 5
votes: 0

Strange ... not sure why that's happening in IE. Works fine in Chrome and Firefox though ...

Anyway, thanks again - this is EXACTLY what I was looking for. I appreciate your help.

One last question: how hard would it be to add an expand/collapse bullet to the beginning of the Click Me text (e.g. a plus sign for expanding the hidden text, that then turns into a minus sign to collapse the text once its been expanded)?

6:50 pm on Nov 11, 2008 (gmt 0)

New User

10+ Year Member

joined:Nov 10, 2008
posts: 5
votes: 0


Or should I put this request into a separate post?