Как переключить активную вкладку?

Question

Я имею в виду, как аккордеонная навигация, первый щелчок, открыть его, второй щелчок скрыть

демонстрационная ссылка: http://codepen.io/cowardguy/pen/dGKEjy

Вы можете увидеть выше ссылку

$("ul.otel-filtre-fiyat-tab li").click(function(){
        /*
            $(this).parents(".otel-tekli-listeleme").find(".otel-full-detay").slideToggle();
        */
        var number = $(this).index();
        $("ul.otel-filtre-fiyat-tab li").removeClass("tab-aktif-hover");
        $(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").hide().eq(number).slideDown("fast");
        $(this).parents(".otel-tekli-listeleme").find("ul.otel-filtre-fiyat-tab li").eq(number).addClass("tab-aktif-hover");
        return false;
    });

Вы можете нажать отмеченную область

Answer 1

Проблема в этой строке:

$(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").hide().eq(number).slideDown("fast");

Я удалил hide метод и я использовал slideToggle вместо slideDown,

$(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").eq(number).slideToggle("fast");

Я также изменил последнюю строку:

$(this).parents(".otel-tekli-listeleme").find("ul.otel-filtre-fiyat-tab li").eq(number).toggleClass("tab-aktif-hover");

Таким образом, цвет границы будет удален, если вкладка закрыта. Вам также необходимо удалить строку с removeClass, Результат:

$("ul.otel-filtre-fiyat-tab li").click(function(){
    var number = $(this).index();

    $(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").not(':eq(' + number + ')').slideUp("fast");
    $(this).parents(".otel-tekli-listeleme").find("ul.otel-filtre-fiyat-tab li").not(':eq(' + number + ')').removeClass("tab-aktif-hover");

    $(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").eq(number).slideToggle("fast");
    $(this).parents(".otel-tekli-listeleme").find("ul.otel-filtre-fiyat-tab li").eq(number).toggleClass("tab-aktif-hover");
    return false;
});