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

**Electroman** · May 7th, 2004, 09:00 AM

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

**Acidic** · May 7th, 2004, 09:07 AM

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 = ""

**Electroman** · May 7th, 2004, 09:12 AM

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....

**Electroman** · May 7th, 2004, 09:20 AM

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

**Electroman** · May 7th, 2004, 09:23 AM

Nevermind, it works, its cos I had the two Show functions

. It now works, Thanx.

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

Thread Tools

Display

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

Posting Permissions