Страницы

Поиск по вопросам

среда, 24 апреля 2019 г.

Нужно совместить эффект аккордеона и табов в одном скрипте

Хочу немного модифицировать этот скрипт, чтобы из активного элемента switch tab разворачивался его контент, сейчас это работает не верно (раскрываются сразу все).
Делал решение на css с привязкой раскрытия к активному элементу, но даже с transition раскрытие/скрытие выглядит не плавно, поэтому решил попробовать со слайдами.
$(".content").not(":first").hide(); $(".switch:first div").show(); $(".switch").click(function() { var sld = $(".switch div"); $(".switch").removeClass("active").eq($(this).index()).addClass("active"); $(".content").hide().eq($(this).index()).fadeIn(); if ($(".switch").eq($(this).index()).hasClass("active")) { sld.slideDown(); } else { sld.slideUp(); } }).eq(0).addClass("active"); .switch span { display: inline-block; font-family: Arial; font-size: 14px; padding: 5px; margin-bottom: 10px; background-color: #eee; border-radius: 4px; border: 1px solid #ccc; } .switch div { display: none; font-family: Arial; font-size: 16px; padding: 5px 0; } .active span { color: red; }

Switch_1
Some text switch tab 1
Switch_2
Some text switch tab 2
Switch_3
Some text switch tab 3
some content 1
some content 2
some content 3

Подскажите что я делаю не так?


Ответ

Можете вот так сделать:
$('.switch div').each(function( index ) { var sld = $(this); sld.slideUp(); });
if ($(this).hasClass('active')) { var sld = $(this).find('div'); sld.slideDown(); }
Полный код Jquery:
(function($) { $(".content").not(":first").hide(); $(".switch:first div").show(); $(".switch").click(function() {
$(".switch").removeClass("active").eq($(this).index()).addClass("active"); $(".content").hide().eq($(this).index()).fadeIn();
$('.switch div').each(function( index ) { var sld = $(this); sld.slideUp(); });
if ($(this).hasClass('active')) { var sld = $(this).find('div'); sld.slideDown(); } }).eq(0).addClass("active"); })( jQuery );
Результат:

Комментариев нет:

Отправить комментарий