javascript - How are they doing the accordion style dropdown on the following website? - Stack Overflow

admin管理员组

文章数量:1343935

I was taking a look at .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?

I was taking a look at http://www.zenfolio./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?

• javascript
• css

Share Improve this question Follow edited Jan 5, 2009 at 19:35 Xaisoft asked Jan 5, 2009 at 19:17 XaisoftXaisoft 46.7k8787 gold badges286286 silver badges444444 bronze badges 1

• Check out StackPanel in GWT... – Sathish Commented Jan 5, 2009 at 19:30

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

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

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.

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.

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.

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./zf/script/en-US/safari3/windows/5AN2EHZJSZSGS/sitehome.js

The script is here.

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

// This script seems over-plicated... I wouldn't remend 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 ments

Unfortunately their code is in-lined and hard to read (http://www.zenfolio./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.

本文标签： javascriptHow are they doing the accordion style dropdown on the following websiteStack Overflow