Forum Moderators: open
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>
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>
Oh, and welcome to WebmasterWorld! :)
[edited by: Fotiman at 7:53 pm (utc) on Nov. 10, 2008]
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.
<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]
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?
<!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>
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)?
