Добавление настроек типа аккордеона?

Question

Я хочу иметь возможность добавить весь аккордеонный аспект в этот код в jsFiddle.Где, если вы развернете один, а затем нажмете на другое, он свернет предыдущий div и отобразит последний клик.

Любая идея, как я могу сделать это с помощью этого jsFiddle?

http://jsfiddle.net/zrbFE/

Спасибо всем!

Answer 1

http://jsfiddle.net/fAmWx/1/

Это может помочь вам начать работу в правильном направлении.Идея состоит в том, чтобы упростить и повторно использовать имена классов и код.

Answer 2

Мне нравится эта библиотека для этой функциональности:

http://flowplayer.org/tools/demos/tabs/accordion.html

Гораздо легче, чем jQuery UI, и прекрасно работает. Посмотрите на этой странице примеры того, как пометить ее и вызвать в сценарии.

Answer 3

Попробуйте это для своего jsfiddle:

function toggleMe(me) {
    var alreadyOpen = me.is(':visible');
    jQuery('div[class^="content-"]').hide('fast');
    if (!alreadyOpen) {
        me.show('slow');
    }
}
jQuery('.expand-one').click(function() {
    toggleMe(jQuery('.content-one'));
    var img = $(this).find('img'),
        src = img.attr("src"),
        alt = img.data("altsrc");
    img.attr("src", alt).data("altsrc", src);
});
/// SECOND SESSION:
/////////////////////////////////////////////////////////////////////////////////////
jQuery('.expand-two').click(function() {
    toggleMe(jQuery('.content-two'));
    var img = $(this).find('img'),
        src = img.attr("src"),
        alt = img.data("altsrc");
    img.attr("src", alt).data("altsrc", src);
});

Надеюсь, это поможет,

Пит

Answer 4

Я сделал это некоторое время назад, думаю, что это подойдет вашим потребностям: http://jsfiddle.net/aCaEG/2/