Question

I was taking a look at http://www.zenfolio.com/zf/features.aspx and I can’t figure out how they are doing the accordion style expand and collapse when you click on the orange links. I have been using the Web Developer Toolbar add-on for firefox, but I have not been able to find anything in the source of the page like JavaScript that would be doing the following. If anyone knows how they are doing it, that would be very helpful.

This is actually unrelated, but if all you answers are good, who do I give the answer too?

Answer 1

They’re setting the .display CSS property on an internal DIV from ‘none’ to ”, which renders it.

It’s a bit tricky, as the JS seems to be in here that’s doing it:

http://www.zenfolio.com/zf/script/en-US/mozilla5/windows/5AN2EHZJSZSGS/sitehome.js

But that’s basically how everyone does this. It’s in there, somewhere.

EDIT: Here it is, it looks like:

//... (bunch of junk)  zf_Features.prototype._entry_onclick = function(e, index)  {     var cellNode = this.dom().getElementsByTagName('H3')[index].parentNode;     while (cellNode.tagName != 'TD') cellNode = cellNode.parentNode;      if (this._current != null) this.dom(this._current).className = 'desc';     if ('i' + index != this._current)      {         cellNode.className = 'desc open';         cellNode.id = this.id + '-i' + index;         this._current = 'i' + index;     }      else this._current = null;     zf_frame.recalcLayout();     return false; }; 

Basically, what they’re doing is a really roundabout and confusing way of making the div inside of TD’s with a class ‘desc’ change to the class ‘desc open’, which reveals its contents. So it’s a really obtuse roundabout way to do the same thing everyone does (that is, handling onclick to change the display property of a hidden div to non-hidden).

EDIT 2:

lol, while I was trying to format it, others found it too. =) You’re faster than I 😉