[headbirth]

document.getElementById("s1").style.visibility = "hidden";

Can this type of statement be twisted to change a class from one class tag to another, temporarily overriding the coded class?

Something like:

document.getElementById("c1").class = "class2";

[Oisín]

Yes.

Nice and simple answer, innit?

Actually, it's 2:45 and my JavaScript is not good enough to know/remember intuitively if the syntax is exactly the same, or if you have to change something, but I know you can do it, 'cause I did it with a page a while ago and I think I'm rambling senselessly in my sleep now, so I think I'll just scoop off to bed then, shall I? All righty then...

[Synotic]

I guess all 3 of us are too lazy to do a search in Google for the answer (and despite using some generic terms like 'javascript change class' it does work). I believe it's 'className', not 'class'.

[headbirth]

Thanks for the hints and yawns guys. I think I tracked down the right info here:

http://dhtmlkitchen.com/learn/js/setstyle/index5.jsp

[headbirth]

Frustrating. Can't seem to get it to work:


function setClassName(objId, className) {
document.getElementById(objId).className = className;
}


<p class="caseStudy1"><img class="markerOrange" src="Site/Art/Navigation/Arrow_Yellow_White.jpg" alt="" width="14" height="20" border="0"><span class="caseNo"><a href="javascript:setClassName('test1', 'briefBody');">Stagnito Communications — No.482</a> —</span> <span class=
"projectType">Food &amp; Beverage Report 2002: Art Direction, Design, Production</span></p>

<p id="test1" class="briefBody1">A very quickly planned publication on a tight deadline; design, and production were approched with this in mind. The look of this publication was kept clean, but bold and appealing to simplify the production process. </p>

[headbirth]

O.K. got it to work, but now I'm trying to figure out how the same link can toggle or reverse what it did on the first click.

[JS]

function toggleID(whichOne) {
switch(whichOne) {

case 50:
document.getElementById("TS1").style.visibility = "hidden";
document.getElementById("TV1").style.visibility = "visible";
document.getElementById("test1").className = "briefBody";
document.getElementById("test2").className = "caseStudy";
document.getElementById("test3").className = "markerOrangeLong";
break;
document.Case345.src = "Site/Art/Publishing/280_IBM.jpg";


[html]

<div id="TS1" class="caseListings1">

<p id="test2" class="caseStudy1"><img id="test3" class="markerOrange" src="Site/Art/Navigation/Arrow_Yellow_White.jpg" alt="" width="14" height="20" border="0"><span class="caseNo"><a href="javascript:toggleID(50);">Stagnito Communications — No.482</a> —</span> <span class=
"projectType">Food &amp; Beverage Report 2002: Art Direction, Design, Production</span></p>

<p id="test1" class="briefBody1">A very quickly planned publication on a tight deadline; design, and production were approched with this in mind. The look of this publication was kept clean, but bold and appealing to simplify the production process. </p>



Anyone know if I can do this? Ideas? Hints?

Thanks!

[Chris O'Brien]

Code:
function toggleID(whichOne) {
        switch(whichOne) {

    case 50:
      document.getElementById("TS1").style.visibility = "hidden";
      document.getElementById("TV1").style.visibility = "visible";
      if (document.getElementById("test1").className != "briefBody") {
          document.getElementById("test1").className = "briefBody";
          document.getElementById("test2").className = "caseStudy";
          document.getElementById("test3").className = "markerOrangeLong";
      } else {
          document.getElementById("test1").className = "briefBody1";
          document.getElementById("test2").className = "caseStudy1";
          document.getElementById("test3").className = "markerOrange";
      }
      break;
      document.Case345.src = "Site/Art/Publishing/280_IBM.jpg";


[html]

<div id="TS1" class="caseListings1">

<p id="test2" class="caseStudy1">
<img id="test3" class="markerOrange" src="Site/Art/Navigation/Arrow_Yellow_White.jpg" alt="" width="14" height="20" border="0">
<span class="caseNo">
<a href="javascript:toggleID(50);">Stagnito Communications — No.482</a> —</span> 
<span class=
"projectType">Food &amp; Beverage Report 2002: Art Direction, Design, Production
</span>
</p>

<p id="test1" class="briefBody1">
A very quickly planned publication on a tight deadline; design, and production were approched with this in mind. The look of this publication was kept clean, but bold and appealing to simplify the production process. 
</p>

It's not very nice, admittedly.

As a side note, you can also change classNames via pure DOM: document.getElementById("whatever").setAttribute(" class","className");

edit: I've only shown toggling the classnames, obviously you can change it to toggle everything (the visibility stuff too, that is).

[headbirth]

Thanks for the help ... I'll plug your code in and see how it flys.

I've never played with the DOM, but think I might give it a try.

I'm still relearning alot of javascript, css, etc...

[headbirth]

hmmm .... doesn't seem to be working. Is there a paren missing?

[Chris O'Brien]

Yeah, sorry there should be a closing bracket at the end of the if statement. Whoops.

It should be ) { instead of ;

I obviously wasn't thinking much when I posted. I've ammended the other post too.

[headbirth]

Thought it was something like that.

Thanks again for the help!

[headbirth]

Works! At least in Camino and Safari.
Any thoughts on why this technique doesn't fully work in Explorer? It seems to work partially then stop.


Sample:
http://home.earthlink.net/~headbirth/Test/test2.html

click the first line of boxed copy and more copy will display below it (the link toggles the copy)

[Oisín]

There's something wrong there...

The first one works fine. When I click the second one, it expands the links properly, but all the other links disappear, so there's only #2 visible. When I click #3, it opens correctly, but I can't close it again. The rest don't work.

Opera 7.5 on XP.

Edit: P.S.: It's either perusing or pursuing - there's no such word as persuing

[Chris O'Brien]

There's a wee problem that's simple: you don't have all the body tag's attributes on one line. That's throwing an error.

As for the rest. Well, the javascript is working fine, since it's only meant to work on that first one, yeah? The problem with IE is your CSS. I find it weird that you are hiding and showing part of the markup, but don't seem to be using display: none anywhere. The CSS can be trimmed down a lot, as can the HTML. Looks nice though

[headbirth]

Not sure I'm following you as far as the body tag <body> all being on the same line.

Could you also followup on your remark about the use of display: none being used or rather not being used in my case? I'm still trying to relearn everything, so I guess I'll have to look this up.

Yeah, the code is still riddled with old experiments that I need to remove and clean from the html, css, and js.

Thanks once again for the help.

[Chris O'Brien]

Your body tag appears to be like:

Code:
<body onload="something('lalala','
lalala','somethingelse'','etc')">

rather than all on one line. This is throwing an error because what is in the onload attribute is not proper string (an 'unterminated string literal')...

Sorry for the bad example above, I couldn't be bothered actually going to your site and copying/pasting. Sorry

As for the display: none thing. Well, it seems that you are hiding and showing part of the page, yeah? Toggling the display of the element you are doing that to between 'none' and 'block' would achieve just that...

[headbirth]

Brillant! I wasn't sure the display: none would close the space occupied by the object. Seems to work very well and much cleaner code-wise.