Void(0) confusion

[thesheep]

I have a bunch of expanding/collapsing sections with old-style inline event handlers, like this:

<a href="javascript: void(0)" class="collapse" onclick="showhide('f1',this)">Collapse</a>
<div id="f1">Content</div>

And I want to make it a bit nicer and use something like this:

<a href="#f1" class="collapse" onclick="showhide('f1',this); return false;">Collapse</a>

One of the things that showhide() does (appart from showing/hiding the DIV) is to switch the className of the calling link, so that it gets styled differently when the section is expanded/collapsed.

The odd thing is that it works fine in its original form, but when I replace 'javascript: void(0)' with a proper href, the link no longer picks up the styling changes.

Investigation shows that the className variable assignment is happening, but for some reason the different styles for this className aren't showing up...

Further checking shows that this problem occurs in Firefox but not in Safari, which is doing OK.

Any ideas?

[thesheep]

And here's the code for the showhide() function:

function showhide(what,thisLink)  
{      
 if (!document.getElementById) return null; 
 
 var showWhat = document.getElementById(what);
 
 if(showWhat.className == "expanded"){ 
 //collapse this item  
 showWhat.className = "collapsed";   
 thisLink.className = "expand";
 thisLink.title = "Expand to read more";
 thisLink.blur();
 }        
 
 else {  //we need to expand this item  
 
 showWhat.className = "expanded"; //display this item         
 hideDivs(what); //collapse any other items   
 resetLinks(); //make sure the previous active link doesn't point down anymore
 thisLink.className = "collapse"; //make this link point down
 thisLink.title = "Collapse";
 thisLink.blur();
}}

[StupidScript]

if(showWhat.className == "expanded"){
//collapse this item
showWhat.className = "collapsed";
thisLink.className = [b]"expand"[/b];
thisLink.title = "Expand to read more";
thisLink.blur();
}

Perhaps that should be "expanded"? Or do you have two classes, one for DIV elements and one for anchors?

Are you using Gecko's Javascript error console to view errors? I'm not even sure that a misspelled className would trigger an error, but I'm just wondering.

[edited by: StupidScript at 6:56 pm (utc) on May 1, 2007]

[thesheep]

Hi, yeah I know it kind of looks a bit confusing, but I have 2 different classes. I name links by their action, but the DIV elements by their state. So when a DIV is expanded the corresponding link has the class collapse as it is ready to collapse the DIV. Does it sound too complex?

Yes I'm using the JS console within Firefox, and it's not giving me any errors...

It's probably something really stupid that I'm doing, if only I could see it

[thesheep]

OK after much gnashing of teeth, I worked out it's a CSS problem.

I was applying the changed styles using the 'link', 'visited' pseudo-classes, like this:

a.collapse:link, a.collpase:visited {
background-image: url(images/rotating-arrow-down.gif);
}

And for some reason some browsers don't like that, although I can't see why. After the link is clicked, I think it should be in the state 'visited' (I also tried styling 'active' so it wasn't that).