CODEWITHSUNDEEP
javascriptjquery
Husna
Husna

Reputation: 1386

Nested tabs using jquery

I'm working on tabs. Multiple tabs on the same page are working fine now I'm trying to add tab inside the tab. Nested Sub tabs default current active class is not coming i have tried using $(this).parent() and $(this).closest() in jquery but not achieve the result.Here I was not used any id's because I want multiple tabs on the same page which is coming dynamically. Can anyone point me in the right direction nested tab default active tab and I have added the current class in HTML but because of for each loop current class is removing. How to target only the current parent tab, not sub nested tabs.

Multiple tabs achieved

function atscTabs() {
  $('.at-tabs').each(function(index, item) {
    var $mainContainer = $(this);
    var $menuContainer = $(this).find('.at-tabs-nav__item');
    var $label = $(this).find('.at-tab-__title_text');
    var $content = $(this).find('.at-tabs-content__item');

    $content.hide();
    $label.each(function(idx, ele) {
      $(this).attr('data-target', idx)
    });
    $($menuContainer[0], $label[0]).addClass('current');
    $($content[0]).show();

    $menuContainer.click(function(ele) {
      $($mainContainer).find('.current').removeClass('current');
      $(this).addClass('current');
      $(this).find('.at-tab-__title_text').addClass('current');
      $($mainContainer).find('.at-tabs-content .at-tabs-content__item').hide().eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
    });
  });
}

atscTabs();
.tab-warp {
  width: 500px;
  margin: 0 auto;
}

.at-tabs-nav__item.current {
  padding: 10px 20px;
  background-color: #3c98ff;
}

.at-tabs-nav {
  display: flex;
  padding: 28px 0px;
}

a.at-tabs-title {
  text-decoration: none;
  font-size: 18px;
  color: black;
}

.current a.at-tabs-title {
  color: #fff;
}

.at-tabs-nav__item {
  padding: 10px 20px;
  margin: 0 10px;
  background: #e1e1e1;
}

.at-tabs-content {
  font-size: 16px;
  padding: 25px;
  background: #e1e1e1;
}

hr {
  height: 5px;
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="at-tabs-c2a3d74" class="at-tabs">
  <div class="at-tabs-nav">

    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text current">Tab #1</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #2</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #3</span>
        </div>
      </a>
    </div>

  </div>
  <div class="at-tabs-content">
    <div class="at-tabs-content__item">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
    <div class="at-tabs-content__item">
      ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
    <div class="at-tabs-content__item">
      I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
  </div>
</div>



<div id="at-tabs-c2a3d74" class="at-tabs">
  <div class="at-tabs-nav">

    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text current">Tab #1</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #2</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #3</span>
        </div>
      </a>
    </div>

  </div>
  <div class="at-tabs-content">
    <div class="at-tabs-content__item">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
    <div class="at-tabs-content__item">
      ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
    <div class="at-tabs-content__item">
      I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
  </div>
</div>

Trying to do Nested Tabs

function atscTabs() {
  $('.at-tabs').each(function(index, item) {
    var $mainContainer = $(this);
    var $menuContainer = $(this).find('.at-tabs-nav__item');
    var $label = $(this).find('.at-tab-__title_text');
    var $content = $(this).find('.at-tabs-content__item');

    $content.hide();
    $label.each(function(idx, ele) {
      $(this).attr('data-target', idx)
    });
    $($menuContainer[0], $label[0]).addClass('current');
    $($content[0]).show();

    $menuContainer.click(function(ele) {
      $($mainContainer).find('.current').removeClass('current');
      $(this).addClass('current');
      $(this).find('.at-tab-__title_text').addClass('current');
      $($mainContainer).find('.at-tabs-content .at-tabs-content__item').hide().eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
    });
  });
}

atscTabs();
.tab-warp {
  width: 500px;
  margin: 0 auto;
}

.at-tabs-nav__item.current {
  padding: 10px 20px;
  background-color: #3c98ff;
}

.at-tabs-nav {
  display: flex;
  padding: 28px 0px;
}

a.at-tabs-title {
  text-decoration: none;
  font-size: 18px;
  color: black;
}

.current a.at-tabs-title {
  color: #fff;
}

.at-tabs-nav__item {
  padding: 10px 20px;
  margin: 0 10px;
  background: #e1e1e1;
}

.at-tabs-content {
  font-size: 16px;
  padding: 25px;
  background: #e1e1e1;
}

hr {
  height: 5px;
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="at-tabs-c2a3d74" class="at-tabs">
  <div class="at-tabs-nav">

    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text current">Tab #1</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #2</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #3</span>
        </div>
      </a>
    </div>
  </div>
  <div class="at-tabs-content">
    <div class="at-tabs-content__item">


      <div id="at-tabs-c2a3d74" class="at-tabs">
        <div class="at-tabs-nav">

          <div class="at-tabs-nav__item">
            <a class="at-tabs-title" href="#">
              <div class="at-title-text-wrapper">
                <span class="at-tab-__title_text current">Tab #1</span>
              </div>
            </a>
          </div>
          <div class="at-tabs-nav__item">
            <a class="at-tabs-title" href="#">
              <div class="at-title-text-wrapper">
                <span class="at-tab-__title_text">Tab #2</span>
              </div>
            </a>
          </div>
          <div class="at-tabs-nav__item">
            <a class="at-tabs-title" href="#">
              <div class="at-title-text-wrapper">
                <span class="at-tab-__title_text">Tab #3</span>
              </div>
            </a>
          </div>
        </div>
        <div class="at-tabs-content">
          <div class="at-tabs-content__item">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
          </div>
          <div class="at-tabs-content__item">
            ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
          </div>
          <div class="at-tabs-content__item">
            I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
          </div>
        </div>
      </div>

    </div>
    <div class="at-tabs-content__item">
      ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
    <div class="at-tabs-content__item">
      I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
  </div>
</div>

Upvotes: 1

Views: 479

Answers (1)

Just code
Just code

Reputation: 13801

You are doing everything right, except scopes, your click event scopes are applied to all the elements, you need to limit the scope to the .at-tabs

Like this:

$(this).find('.at-tabs-nav__item').click(function(ele) {   
      $(this).closest('.at-tabs').find('.current').removeClass('current');
      $(this).addClass('current');
      $(this).find('.at-tab-__title_text').addClass('current');
      $(this).closest('.at-tabs').find('.at-tabs-content__item').hide().eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
    });
  });

Full example:

function atscTabs() {
  $('.at-tabs').each(function(index, item) {

    var $mainContainer = $(this);
    var $menuContainer = $(this).find('.at-tabs-nav__item');
    var $label = $(this).find('.at-tab-__title_text');
    var $content = $(this).find('.at-tabs-content__item');

    $content.hide();
    $label.each(function(idx, ele) {
      $(this).attr('data-target', idx)
    });
    $($menuContainer[0], $label[0]).addClass('current');
    $($content[0]).show();

    $(this).find('.at-tabs-nav__item').click(function(ele) {
      $(this).closest('.at-tabs').find('.current').removeClass('current');
      $(this).addClass('current');
      $(this).find('.at-tab-__title_text').addClass('current');
      $(this).closest('.at-tabs').find('.at-tabs-content__item').hide().eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
    });
  });
}

atscTabs();
.tab-warp {
  width: 500px;
  margin: 0 auto;
}

.at-tabs-nav__item.current {
  padding: 10px 20px;
  background-color: #3c98ff;
}

.at-tabs-nav {
  display: flex;
  padding: 28px 0px;
}

a.at-tabs-title {
  text-decoration: none;
  font-size: 18px;
  color: black;
}

.current a.at-tabs-title {
  color: #fff;
}

.at-tabs-nav__item {
  padding: 10px 20px;
  margin: 0 10px;
  background: #e1e1e1;
}

.at-tabs-content {
  font-size: 16px;
  padding: 25px;
  background: #e1e1e1;
}

hr {
  height: 5px;
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="at-tabs-c2a3d74" class="at-tabs">
  <div class="at-tabs-nav">

    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text current">Tab #1</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #2</span>
        </div>
      </a>
    </div>
    <div class="at-tabs-nav__item">
      <a class="at-tabs-title" href="#">
        <div class="at-title-text-wrapper">
          <span class="at-tab-__title_text">Tab #3</span>
        </div>
      </a>
    </div>
  </div>
  <div class="at-tabs-content">
    <div class="at-tabs-content__item">

      <div id="at-tabs-c2a3d74" class="at-tabs">
        <div class="at-tabs-nav">

          <div class="at-tabs-nav__item">
            <a class="at-tabs-title" href="#">
              <div class="at-title-text-wrapper">
                <span class="at-tab-__title_text current">Tab #1</span>
              </div>
            </a>
          </div>
          <div class="at-tabs-nav__item">
            <a class="at-tabs-title" href="#">
              <div class="at-title-text-wrapper">
                <span class="at-tab-__title_text">Tab #2</span>
              </div>
            </a>
          </div>
          <div class="at-tabs-nav__item">
            <a class="at-tabs-title" href="#">
              <div class="at-title-text-wrapper">
                <span class="at-tab-__title_text">Tab #3</span>
              </div>
            </a>
          </div>
        </div>
        <div class="at-tabs-content">
          <div class="at-tabs-content__item">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
          </div>
          <div class="at-tabs-content__item">
            ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
          </div>
          <div class="at-tabs-content__item">
            I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
          </div>
        </div>
      </div>

    </div>
    <div class="at-tabs-content__item">
      ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
    <div class="at-tabs-content__item">
      I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    </div>
  </div>
</div>

Upvotes: 1

Related Questions