PDA

Click to See Complete Forum and Search --> : Expandable/Collapsable div via OnClick

supergreg
12-18-2003, 07:29 PM
I need some help troubleshooting a "Object expected" error with a script I borrowed. It basically is supposed to show a div that is hidden on the page when the end-user clicks on a link.

Here's the javascript:

<script language="javaScript" type="text/javascript">
function toggle(toggleId, e)
{
if (!e) {
e = window.event;
}
if (!document.getElementById) {
return false;
}
var body = document.getElementById(toggleId);
if (!body) {
return false;
}
if (body.style.display == 'none') {
body.style.display = 'inline';
} else {
body.style.display = 'none';
}
}
if (e) {
// Stop the event from propagating, which
// would cause the regular HREF link to
// be followed, ruining our hard work.
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
}
}
</script>

Here's the HTML

<a href="#" onClick="toggle('collapsedList', event)">Click Here</a>
<div id="collapsedList" style="display: none;">
<p><a href="1">Item 1</a>
<br><a href="2">Item 2</a>
<br><a href="3">Item 3</a></p>
</div>

Thanks so much for your help!

-joe
fredmv
12-18-2003, 07:38 PM
That code could be simplified quite a bit. Try this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
function toggle(o)
{
var e = document.getElementById(o);
e.style.display = (e.style.display == 'none') ? 'block' : 'none';
}
//]]>
</script>
</head>
<body>
<div>
<a href="#" onclick="toggle('list');">Open/close menu.</a>
<div id="list" style="display: none;">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</body>
</html>
supergreg
12-19-2003, 09:32 AM
Thank you kindly. It worked like a charm :)
fredmv
12-19-2003, 11:18 AM
You're welcome. :D
supergreg
12-19-2003, 11:39 AM
Thanks again for your help.

In further testing, I noticed that this is expanding fine in Mozilla (Netscape 7), but it doesn't collapse when you click on the toggle link again. Do you know why that is happening?

--------------------------------

Actually, it works fine in Mozilla (the code you have), but it doesn't work on my page as noted above. I'll try and figure it out.
fredmv
12-19-2003, 11:44 AM
Interesting. I tested it under Mozilla 1.6a before posting and it worked perfectly. Did you alter the code at all?
supergreg
12-19-2003, 11:50 AM
I altered only the containing link text and the information contained in the DIV.

I think it might be conflicting with some other Javacsript on the page or something. I can't really share that, or the URL in this public form, unfortunately.
begeiste
12-19-2003, 12:38 PM
Thanks so much guys.
fredmv
12-19-2003, 12:41 PM
Welcome to the forums.

You're very welcome. :D
lilqhgal
11-08-2004, 05:52 PM
I'm bumping this because I want to know if there's a way to have more than one list...

LINK 1
--sublink1
--sublink2

LINK 2
--sublink1
--sublink2
--sublink3


...etc?
Paul Jr
11-08-2004, 10:27 PM
Sure. Just add more lists.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<title>Example</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript"><!--
function toggle(o) {
var e = document.getElementById(o);
e.style.display = e.style.display == 'block' ? 'none' : 'block';
}
onload = function() {
var e, i=0;
while(e = document.getElementById(['list1', 'list2'][i++])) {
e.style.display = 'none';
}
}
//--></script>
</head>
<body>
<ul>
<li><a href="#" onclick="toggle('list1');">List 1</a>
<ul id="list1">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</li>
<li><a href="#" onclick="toggle('list2');">List 2</a>
<ul id="list2">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</li>
</ul>
</body>
</html>
sanjuT
11-09-2004, 11:39 AM
How can the links be modified so that it is not an a href='#' link?

that cause the page to move up to the top, which becomes a problem when the links are down the page (scrolling required).

Thanks.
sanjuT
11-09-2004, 11:45 AM
forget it, i found out i can use this:

a href = "javascript://"

and the page will not jump.
Jona
11-09-2004, 12:25 PM
sanjuT,

You should not use the "javascript:" pseudo-protocol in your links. Instead, link to a file that will provide the same functionality, and include the "return false" statement to prevent the link from redirecting users with JavaScript. This is a common fail-safe technique. I'd suggest using it whenever applicable.
sanjuT
11-09-2004, 01:12 PM
why shouldn't i use the javascript way?

all my users have JS enabled (corporate intranet).

I am not clear on the way u r sugessting.
Jona
11-09-2004, 01:14 PM
Originally posted by sanjuT
why shouldn't i use the javascript way?

all my users have JS enabled (corporate intranet).

I am not clear on the way u r sugessting.

On a controlled environment, all I can say is I hope no one has disabilities that cause them unable to use a page that has Javascript on it - even if they have JavaScript enabled.
sanjuT
11-09-2004, 01:16 PM
what scenarios are you talking about? I don't understand.:confused:
Jona
11-09-2004, 01:22 PM
In a controlled environment it may be true that everyone has JavaScript enabled -- but if someone has a disability such as blindness, you may have a problem.
sanjuT
11-09-2004, 01:36 PM
i recall hearing some things about that. how would a blind person see the web page in the first place?
Jona
11-09-2004, 01:46 PM
Through screen readers. An accessible site means that the content can be read/understood regardless of the device accessing it.
sanjuT
11-09-2004, 01:51 PM
ohhh, ok, thanks again!!
Jona
11-09-2004, 01:52 PM
Welcome.
Paul Jr
11-09-2004, 03:06 PM
It's actually simpler than that.
Change the onclick attribute to:

onclick="return toggle('the_id');"

Then add change the toggle function to:

function toggle(o) {
var e = document.getElementById(o);
e.style.display = e.style.display == 'block' ? 'none' : 'block';
return false;
}