Multiple tabs in same page using jQuery

Question

I'm working on tabs I want multiple tabs on the same page and I don't want to change id's for the next tab because I have to pass dynamically. I tried using id same id's which are the conflict with each other. Can anyone suggest me. So, far I tried.

function atscTabs() {
  $('.at-tabs-nav__item').click(function() {
    var tab = $(this).data('tab');

    $('.at-tab-__title_text').removeClass('current');
    $('.at-tabs-nav__item').removeClass('current');

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

atscTabs();

.current {
  color: white;
  padding: 5px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="at-tabs-c2a3d74" class="at-tabs">
  <div class="at-tabs-nav">
    <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 current" data-tab="tab-1">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" data-tab="tab-2">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" data-tab="tab-3">Tab #3</span>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="at-tabs-content">
    <div class="at-tabs-content__item" id="tab-1">
      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" id="tab-2">
      ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.     
    </div>
    <div class="at-tabs-content__item" id="tab-3">
      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>

score 1 · Accepted Answer · answered Nov 23 '18 at 13:45

Hi i have created small script to solve your problem. I hope this will help.

    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();

Let me know if still need help. Avoid using one id multiple places.

FYI: https://stackoverflow.com/a/14446052/5011051

this is exactly what I want here you are targetting `data-target` Can you please explain. In HTML I removed id and data-tabs still working. — Husna, Nov 27 '18 at 05:10
I understand now dynamically passing and targetting `data` attr. Thanks — Husna, Nov 27 '18 at 05:32

Multiple tabs in same page using jQuery

1 Answers1