How are they doing the accordion style dropdown on the following website?

Question

Hello,

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 ;)

Answer 2

There is a lot of obfuscated/minified JS in their master JS include. It looks like they are scraping the DOM looking for H3's and checking for table cells with class desc and then processing the A tags. ( or some other order, possibly ) and then adding the onclick handlers dynamically.

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; }

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

Answer 3

The script is here.

The relevant section seems to be (re-layed out):

// This script seems over-complicated... I wouldn't recommend it!

zf_Features.prototype._init = function()
{
    // Get a list of the H3 elements
    var nodeList = this.dom().getElementsByTagName("H3");

    // For each one... 
    for (var i = 0; i < nodeList.length; i++)
    {
     // ... set the onclick to be the function below
     var onclick = this.eventHandler(this._entry_onclick, i);

     // Get the first <a> within the H3 and do the same
     var node = nodeList[i].getElementsByTagName("A")[0];
     node.href = "#";
     node.onclick = onclick;

     // And again for the first <span>
     node = nodeList[i].getElementsByTagName("SPAN")[0];
     node.onclick = onclick;
    }
};

zf_Features.prototype._entry_onclick = function(e, index)
{
    // Get the parent node of the cell that was clicked on
    var cellNode = this.dom().getElementsByTagName("H3")[index].parentNode;

    // Keep going up the DOM tree until we find a <td>
    while (cellNode.tagName != "TD")
     cellNode = cellNode.parentNode;

    // Collapse the currently open section if there is one
    if (this._current != null)
     this.dom(this._current).className = "desc";

    if ("i" + index != this._current)
    {
     // Open the section we clicked on by changing its class
     cellNode.className = "desc open";
     cellNode.id = this.id + "-i" + index;

     // Record this as the current one so we can close it later
     this._current = "i" + index;
    }
    else
     this._current = null;

    // ???
    zf_frame.recalcLayout();

    return false;
};

Edit: added some comments

Answer 4

It is being done with JavaScript.

When you click a link, the parent td's class changes from 'desc' to 'desc open'. Basically, the expanded text is always there but hidden (display: none;). When it gets the css class of 'open' the text is no longer being hidden (display: block;).

If you look in the sitehome.js and sitehome.css file you can get an idea about how they are doing that.

btw I used FireBug to get that info. Even though there is some feature duplication with Web Developer Toolbar it's worth the install.

Answer 5

They're using javascript. You can do it too:

<div id="feature">
    <a href="javascript:toggle();">Feature Name</a>

    <div id="desc" style=="display:none;">
     description here...
    </div>
</div>

<script type="text/javascript">
function toggle()
{
   var el=document.getElementById('desc');
   if (el.style.display=='none')
      el.style.display='block'; //show if currently hidden
   else
      el.style.display='none'; //Hide if currently displayed
}
</script>

The function above can be written using Jquery for smooth fade in/fade out animations when showing/expanding the descriptions. It has also got a SlideUp and Slidedown effect.

Answer 6

Check out StackPanel in GWT...

Answer 7

Unfortunately their code is in-lined and hard to read (http://www.zenfolio.com/zf/script/en-US/mozilla5/windows/5AN2EHZJSZSGS/sitehome.js), but this looks quite simple to implement... something along these lines (using prototypejs):

<script>
var showHide = {
    cachedExpandable: null
    ,init: function() {
        var containers = $$(".container"); 
        for(var i=0, clickable; i<containers.length; i++) {
            clickable = containers[i].getElementsByClassName("clickable")[0];
            Event.observe(clickable, "click", function(e) {
                Event.stop(e);
                showHide.doIt(containers[i]);
            });
        }
    }
    ,doIt: function(container) {
        if(this.cachedExpandable) this.cachedExpandable.hide();
        var expandable = container.getElementsByClassName("expandable")[0];
        if(expandable.style.display == "none") {
            expandable.show();
        } else {
            expandable.hide();
        }
        this.cachedExpandable = expandable;
    }

};

window.onload = function() {
    showHide.init();
};
</script>

<div class="container">
    <div class="clickable">
        Storage Space
    </div>
    <div class="expandable" style="display: none;">
        Description for storage space
    </div>
</div>

<div class="container">
    <div class="clickable">
        Galleries
    </div>
    <div class="expandable" style="display: none;">
        Description for galleries
    </div>
</div>

Its also caching the earlier expandable element, so it hides it when you click on a new one.

Answer 8

Using jQuery, this effect can be built very easily:

$('.titleToggle').click(function() {
    $(this).next().toggle();
});

If you execute this code on loading the page then it will work with any markup that looks like the following:

<span class="titleToggle">Show me</span>
<div style="display:none">This is hidden</div>

Notice that this code will work for any number of elements, so even for a whole table/list full of those items, the JavaScript code does not have to be repeated or adapted in any way. The tag names (here span and div) don't matter either. Use what best suits you.