Табы внутри табов как зафиксировать дочерние табы в активном положении?

Question

[Aieron]

Доброго дня. У меня что-то не соединяется. На сайте нужно реализовать табы внутри табов. Использую вот этот скрипт

$(document).ready(function () {
        $('.accordion-tabs').children('li').first().children('a').addClass('is-active')
              .next().addClass('is-open').show();
        $('.accordion-tabs').on('click', 'li > a', function(event) {
            if (!$(this).hasClass('is-active')) {
                event.preventDefault();
                $('.accordion-tabs .is-open').removeClass('is-open').hide();
                $(this).next().toggleClass('is-open').toggle();
                $('.accordion-tabs').find('.is-active').removeClass('is-active');
                $(this).addClass('is-active');
            } else {
                event.preventDefault();
            }
        });
    });

для дочерних табов продублировала его но назначила другой класс. С активностью проблем нет, все работает переключается. НО, оно переключается почему то по очереди, а не независимо. и если перейти по одному из родительских табов, то дочерние теряют активность. а мне надо чтобы на табе А отображались активная а1, переключил на B - активна дочерняя В1, вернулся на А активная А и А1. Если просто обновить страницу, то А и а1 активны, проблемы начинаются если перейти на В и вернуться на А. Надеюсь понятно объяснила.

Вас не затруднит подсказать что дописать надо к скрипту чтобы все работало и нужен ли второй такой же скрипт с другими классами? Заранее благодарю.

Поиском, к сожалению, найти адекватное решение и реализовать не получилось, думаю что надо допилить это.

Comments

[Модератор]

Aieron дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

[Aieron]

Модератор, очень смешно. Уважаемый модератор, а вы не видите, что вопрощающий олень в кубе и не понимает разницы и для него любой программист почти Боженька? и что вопрощающий указал все знакомые ему слова. но не больше 5, за что Вы ругались в прошлый раз. Я открою Вам секрет, когда люди будут во всем разбираться, они не будут сюда писать. А я только учусь. Претензия про тег спам,.. ну просто смешна в данном случае, уж понимаю когда меня обвиняют в спаме когда я ссылки на интернет магазины кидаю где то, но когда я пытаюсь найти хоть кого то со смежных профессий и получаю желтую карточку.. это мягко говоря удручает. У меня даже цветочек завял и бантики повисли от печали. Лучше бы вместо вот этого вот.. тут был ответ на то как мне победить вещь с которой я неделю уже бьюсь, не ем не сплю, а она собака женского пола, не работает.
И ДА, самое важное, как показывает практика, когда как раз указываешь 1 тег , вопрсо зачастую остается без ответа. Бывает так ага, когда именно тот кто тебе нужен тупо сидит в другой ветке. Советую пересмотреть правила сервиса. Он создан для кого? Для отвечающих или для вопрошающих? У вас правила под отвечающих, а те кому нужна помощь могут порой обломиться. И примеров этому тысячи по всем темам.

[Модератор]

Aieron, опуская ненужную лирику: если вы не знаете какие теги уместны, лепите один единственный.

Answer 1

[Одиночка Айс]

В целом как-то так:

$(".tabs").each(function(){
	var tabs = $(this);
	tabs.find(".tab").each(function(){
		var post=$(this);
		var i=0;
		post.find(".question").off("click").on("click",function(){
			if(i===0){
				post.addClass("opened");
				i=1;
			}else{
				post.removeClass("opened");
				i=0;
			}
			return false;
		});
	});
});

$(".tabs") - родительский контейнер
$(".tab") - сам таб

Вместо ахинеи с переменной i можно использовать toggleClass(), я просто по привычке использую, дабы избежать проблем с неправильным переключением. Каждый аккордеон должен быть независимым (что родительский, что дочерние).

Comments

[Aieron]

Спасибо за ответ, но пока не получилось. Т.к. в js я ноль действовала методом тыка, попробовала 3 варианта.
1. просто убрала свой код - вставила этот поменяв классы на те что мне надо. - итог просто свернулось все остались 2 неработающие вкладки родительских табов.
2. удалила свой код под дочерние табы и вставила этот после кода родительских табов - остались открытые родительские, дочерние работать перестали.
3. оставила 2 своих кода и вниз прилепила этот со своими классами.
работает так же как и ДО изменений, как будто нет третьего кусочка. В консоли ошибок нет.

[Одиночка Айс]

Aieron, а стили классам кто будет прописывать?) По умолчанию табы скрыты

.tabs{ max-height:0; }

, а когда добавляем класс .opened, то max-height:1000px; скажем

[Aieron]

Одиночка Айс, так у меня прописаны же стили к accordion-tabs :)) я же табс и таб поменяла на
accordion-tabs и дочерние acc-tabs. Так не сработает?)) Мои 2 кода надо грохнуть, правильно?
у меня получилось причем к .is-active стили есть в родном коде, а к .is-open вообще нигде нет, я думала это команда какая то. Блин, как тяжело быть блондинкой(( я js даже читать не умею пока что.

$(".accordion-tabs").each(function(){
  var tabs = $(this);
  tabs.find(".acc-tabs").each(function(){
    var post=$(this);
    var i=0;
    post.find(".question").off("click").on("click",function(){
      if(i===0){
        post.addClass("opened");
        i=1;
      }else{
        post.removeClass("opened");
        i=0;
      }
      return false;
    });
  });
});

Код HTML такой

<ul class="accordion-tabs">
    <li class="tab-head-cont">
        <a href="#" class="is-active">Title</a>
			<section>					
				<ul class="acc-tabs">						
					    <li class="tab1-head-cont">					
							<a href="#" class="is-active">title</a>
								<section>
								content								 
								</section>
						</li>
						<li class="tab1-head-cont">
							<a href="#">Title</a>
								<section>							
								 content
								</section>
						</li>					
				</ul>
				
		
			</section>
    </li>
    <li class="tab-head-cont">
        <a href="#">title</a>
			<section>
         
				<ul class="acc-tabs">						
					<li class="tab1-head-cont">					
						<a href="#" class="is-active">title</a>
								<section>						
								content		 
								</section>
					</li>
					<li class="tab1-head-cont">
						<a href="#">title</a>
								<section>
								content	
								</section>
					</li>
					
				</ul>
		
			</section>
    </li>
    
</ul>

[Одиночка Айс]

Aieron, как успехи?

[Aieron]

Одиночка Айс, не сплю вторые сутки, перепробовала 2 десятка других скриптов, собака зеленая, или вообще отваливается все 2 родительские верхние остаются, или все работает, но по кругу 1 2 3 4.

[Одиночка Айс]

Aieron, Выложите свой полный код вместе с версткой и стилями в какую-нибудь песочницу