Как лучше сверстать такой блок со спойлером?

Question

[Александр Балашов]

Вот такой блок
Там при клике на (цифры/текст под цифрами) должен выходить текст с любым контентом и ширина родительского блока должна подстроиться, т.е. текст в спойлере не фикс.высоты. У меня не получается корректно его поставить.
Может, есть плагины jquery для создания спойлера? Или что-то еще?

Answer 1

[Mary Солнечная]

Это самые обыкновенные табы:
Тыц.
Только вам надо добавить треугольничек, это тоже просто делается:
Например, отследить по клику: если есть класс, который делает активным цифру, то показать его треугольник, если нет - не показывать

Comments

[Александр Балашов]

Спасибо! А можете еще посоветовать, как лучше сделать открытие таба с анимацией (чтобы плавно шло)?

[Mary Солнечная]

fade-in, fade-out. т.е. примерно вот так:

$(document).ready(function(){
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current').fadeOut();

		$(this).addClass('current');
		$("#"+tab_id).addClass('current').fadeIn();
	})
})

но надо параллельно: привязать блок с контентом, чтобы он не прыгал при отработке fade-in/out
либо можете забить на fade в jquery и воспользоваться css3 анимацией

[Сергей Тутуков]

Mary Солнечная: правильный ответ.
Но лучше сокращайте это писанину. Меньше обращайтесь к DOM и пишите полностью все действия.

$('ul.tabs li').on('click',function(){
		var tab_id = $(this).attr('data-tab');
    $(this).addClass('current').siblings().removeClass('current');
		$('.tab-content').removeClass('current').filter('#'+tab_id).addClass('current');
	});

И замените click на on. Difference between .on('click') vs .click()

[Mary Солнечная]

Спасибо вам, я стараюсь)

Answer 2

[Алёша]

А что

У меня не получается корректно

именно не получается корретно сделать? Сверху блоки с цифрами, снизу слик слайдер( у него есть в документации функция анимации контента при разных высотах). При наведении показывать нужный слайдер.