JavaScript/CSS: Changing the class of an id with a javascript.

Printable View

May 7th, 2004, 09:00 AM
Electroman

JavaScript/CSS: Changing the class of an id with a javascript.

I have a page and I want to be able to have a javascript on it that will let me change the class of a tag. For example:

Code:

<A HREF="Show(ItemA);">Show Item A.</A><BR /> <A HREF="Hide(ItemA);">Hide Item A.</A><BR /> <P id="ItemA" class="HiddenItem">This is Item A.</P>

So when Show() is ran the class of the ItemA should be changed to "" and when Hide() is ran it should chnage the class to "HiddenItem".

I have used to have some code that did this but I can't manage to find it :(. BTW I'm no good at Javascript as well :(.

Thanx
May 7th, 2004, 09:07 AM
Acidic

this is untested, but insert this into the hide function:

Code:

document.getElementById('ItemA').className = "HiddenItem"

and this into the show function:

Code:

document.getElementById('ItemA').className = ""
May 7th, 2004, 09:12 AM
Electroman

Thanx, that was along the lines of what I thought would be it. The function the last one used was quite long mind I think it didn't use classes though, it checked the visible and display settigns and just toggled them, but I think this will be better. I'll just test and see if it works....
May 7th, 2004, 09:20 AM
Electroman

Didn't seem to work, I don't know if I have done something else wrong though. Here is the Code I have used on the test page:

Code:

<HTML> <HEAD> <TITLE>Test Page</TITLE> <LINK href="Electroman.css" type="text/css" rel="stylesheet"> <SCRIPT LANGUAGE="javascript"> function Show(IDName) { document.getElementById('ItemA').className = "Red"; } function Show(IDName) { document.getElementById(IDName).className = "HiddenItems"; } </SCRIPT> </HEAD> <BODY> <A HREF="javascript:Show('ItemA')">Show Item A.</A><BR /> <A HREF="javascript:Hide('ItemA')">Hide Item A.</A><BR /> <P id="ItemA" class="HiddenItems">This is Item A.</P> </BODY> </HTML>

CSS File:

Code:

.HiddenItems { VISIBILITY: Hidden; DISPLAY: none; }

The item is hidden to start with but nothing happens when I click the links :(
May 7th, 2004, 09:23 AM
Electroman

Nevermind, it works, its cos I had the two Show functions :rolleyes:. It now works, Thanx.