hide/unhide script for dyanamic table

[Gavin]

Hi everyone,

I have found and addapted a script that displays or hides a div tag
based on it's current class tag, but i can't seem to get it to work. I
am new to Java, and i know that everything has to be perfect in order
for it to function.

Would it be possible for someone to check over my script and point out
any errors there may be/extra spaces etc?

Here is the script:

function Toggle(id)
{
if(document.getElementById("details" + id).class == 'hide')
{
document.getElementById("details" + id").class='blue_sub_body_exp';
document.images["expand" + id].src= "colapse.gif";
}

else
{
document.getElementById("details" + id).class='hide';
document.images["expand" + id].src= "expand.gif";
}

}

Thanks, i appologise if it's something glaringly obvious.

Gavin

[Daz]

On Feb 3, 10:13 pm, "Gavin" <[e-mail]:

Hi everyone,

I have found and addapted a script that displays or hides a div tag
based on it's current class tag, but i can't seem to get it to work. I
am new to Java, and i know that everything has to be perfect in order
for it to function.

I Gavin. First of all it's 'JavaScript', not Java. It's a common
misconception that the wo are related, when they actually aren't.

>
Would it be possible for someone to check over my script and point out
any errors there may be/extra spaces etc?

I can't see any errors in your script, but I am not an expert. Are you
getting any errors? I recommend you install Firefox, and use the
JavaScript debugger which will tell you if anything is wrong. I
suspect that you might not be calling on the function properly. Can
you post an example of the actual page that contains the onclick
function trigger?

>
Here is the script:

function Toggle(id)
{
if(document.getElementById("details" + id).class == 'hide')
{
document.getElementById("details" + id").class='blue_sub_body_exp';
document.images["expand" + id].src= "colapse.gif";

}

else
{
document.getElementById("details" + id).class='hide';
document.images["expand" + id].src= "expand.gif";

}
}

Thanks, i appologise if it's something glaringly obvious.

Gavin

[RobG]

Gavin wrote:

Hi everyone,

I have found and addapted a script that displays or hides a div tag
based on it's current class tag, but i can't seem to get it to work. I
am new to Java,

Javascript is not Java. :-)

and i know that everything has to be perfect in order
for it to function.

Would it be possible for someone to check over my script and point out
any errors there may be/extra spaces etc?

Here is the script:

function Toggle(id)

It's a common convention that function names starting with an uppercase
letter are constructors. Better in this case to use a lower case "t".

{
if(document.getElementById("details" + id).class == 'hide')

Since "class" is a future reserved word in ECMAScript ed 3 (and likely
to be used if JavaScript 2.0 aka ECMAScript ed 4 is ever released) the
CSS class property is called "className".

It is also prudent to check that the value returned by getElementById
before attempting to access its class property:

function toggle(id) {
var el = document.getElementById("details" + id);
if (el && el.className == 'hide') {
...

{
document.getElementById("details" + id").class='blue_sub_body_exp';

If you store the returned value of the getElementById, then you don't
have to call it again.

el.className = 'blue_sub_body_exp';

document.images["expand" + id].src= "colapse.gif";

You can probably change the image too as a property of the CSS class
applied to the div - look at using a positioned background image with no
repeat, then when you change the class of the div, the image changes
too. Then your toggle function becomes:

function toggle(id) {
var el = document.getElementById("details" + id);
if (el) {
el.className = (el.className=='hide')? 'blue_sub_body_exp':'hide';
}
}
--
Rob

[Daz]

On Feb 4, 1:30 am, RobG <[e-mail]:

Gavin wrote:

Hi everyone,

I have found and addapted a script that displays or hides a div tag
based on it's current class tag, but i can't seem to get it to work. I
am new to Java,

Javascript is not Java. :-)

and i know that everything has to be perfect in order
for it to function.

Would it be possible for someone to check over my script and point out
any errors there may be/extra spaces etc?

Here is the script:

function Toggle(id)

It's a common convention that function names starting with an uppercase
letter are constructors. Better in this case to use a lower case "t".

{
if(document.getElementById("details" + id).class == 'hide')

Since "class" is a future reserved word in ECMAScript ed 3 (and likely
to be used if JavaScript 2.0 aka ECMAScript ed 4 is ever released) the
CSS class property is called "className".

It is also prudent to check that the value returned by getElementById
before attempting to access its class property:

function toggle(id) {
var el = document.getElementById("details" + id);
if (el && el.className == 'hide') {
...

{
document.getElementById("details" + id").class='blue_sub_body_exp';

If you store the returned value of the getElementById, then you don't
have to call it again.

el.className = 'blue_sub_body_exp';

document.images["expand" + id].src= "colapse.gif";

You can probably change the image too as a property of the CSS class
applied to the div - look at using a positioned background image with no
repeat, then when you change the class of the div, the image changes
too. Then your toggle function becomes:

function toggle(id) {
var el = document.getElementById("details" + id);
if (el) {
el.className = (el.className=='hide')? 'blue_sub_body_exp':'hide';
}

}

--
Rob

Doh! It's className not class. How did I miss that...? I think my
skills of observation have a lot to be desired.