Как сделать эту немного комическую цепочку в заголовке?
Необходимо, чтобы был таб, в котором есть два-три таба, затем в каждом из них еще по табу, в которых есть контент, глубина вложенности которых не ограничена.
Спасибо за помощь!
<button class="link">iPhone 5</button>
<button class="link">iPhone 5S</button>
<button class="link active">iPhone 5C</button>
<div class="tab" style="display: none;">
<button class="link">iPhone 5</button>
<div class="tab" style="display: none;">
<button class="link">Попал в воду</button>
<button class="link">Не работает тачскрин</button>
</div>
</div>
<div class="tab" style="display: block;">вкладка-2</div>
<div class="tab" style="display: none;">вкладка-3</div>
jQuery(document).ready(function($) {
$('.link').on('click', function(){
$('.link').removeClass('active'); /* Убрали класс со всех кнопок*/
$(this).addClass('active'); /* Добавили его на кликнутую кнопку */
$('.tab').hide(); /* Скрыли все вкладки */
$('.tab').eq( $(this).index('.link') ).show(); /* Показали нужную */
/* внутри eq() можно указать номер класса, а нужный номер получается через
$(this).index('.link') - определяет номер текущего элемента среди классов .link */
});
});