Как они делают раскрывающийся список в стиле аккордеона на следующем веб-сайте?

Они устанавливают свойство CSS .display во внутреннем DIV с 'none' на '', которое отображает его.

Это немного сложно, поскольку, похоже, здесь находится JS, который это делает:

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

Но в основном так все и делают. Он где-то там.

Обновлено: Вот, похоже:

//... (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;
};

По сути, то, что они делают, - это действительно обходной и запутанный способ сделать div внутри TD с заменой класса «desc» на класс «desc open», который раскрывает его содержимое. Так что это действительно тупой обходной способ делать то же самое, что и все (то есть обрабатывать onclick для изменения свойства display скрытого div на не-скрытый).

Обновлено еще раз:

lol, пока я пытался его отформатировать, другие тоже нашли. =) Ты быстрее меня;)

В их основном JS-файле содержится много обфусцированных / минифицированных JS. Похоже, они очищают DOM в поисках H3 и проверяют ячейки таблицы с помощью class desc, а затем обрабатывают теги A. (или, возможно, в другом порядке), а затем динамически добавляя обработчики onclick.

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

Скрипт - здесь.

Соответствующий раздел выглядит (заново выложен):

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

Обновлено: добавил несколько комментариев

Это делается с помощью JavaScript.

Когда вы щелкаете ссылку, класс родительского td изменяется с desc на desc open. По сути, расширенный текст всегда есть, но скрыт (display: none;). Когда он получает класс css «open», текст больше не скрывается (display: block;).

Если вы посмотрите файлы sitehome.js и sitehome.css, вы сможете понять, как они это делают.

Кстати, я использовал FireBug, чтобы получить эту информацию. Несмотря на то, что в Панели инструментов веб-разработчика есть некоторые дублирующие функции, ее стоит установить.

Они используют javascript. Вы тоже можете это сделать:

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

Вышеупомянутая функция может быть написана с использованием JQuery для плавного появления / исчезновения анимации при отображении / расширении описаний. Он также имеет эффект SlideUp и Slidedown.

К сожалению, их код встроен и его трудно читать (http://www.zenfolio.com/zf/script/en-US/mozilla5/windows/5AN2EHZJSZSGS/sitehome.js), но это выглядит довольно просто для реализации ... что-то в этом роде (с использованием 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>

Он также кеширует более ранний расширяемый элемент, поэтому он скрывает его, когда вы нажимаете на новый.

Используя jQuery, можно построить этот эффект очень легко:

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

Если вы выполните этот код при загрузке страницы, он будет работать с любой разметкой, которая выглядит следующим образом:

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

Обратите внимание, что этот код будет работать для любого количества элементов, поэтому даже для всей таблицы / списка, заполненного этими элементами, код JavaScript не требует повторения или адаптации нет каким-либо образом. Имена тегов (здесь span и div) также не имеют значения. Используйте то, что вам больше всего подходит.