Табы с бесконечной вложенностью

Вариант вкладок (табов) с бесконечной вложенностью с помощью jQuery

by Andrey Dobrovoi

HTML

<div class="example">
    <div class="tabs">
      <div class="tabs-nav">
        <a href="#" class="active">Вкладка_1</a>
        <a href="#">Вкладка_2</a>
        <a href="#">Вкладка_3</a>
      </div>
      <div class="tabs-box">
        <div class="active">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At culpa ea provident qui nihil, mollitia debitis, sequi fugit aliquid animi!</p>
        </div>
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dolore velit animi omnis quisquam dolor harum suscipit iste nihil non vero voluptates ea, et, pariatur natus in fugiat libero tempora!</p>
        </div>
        <div>
          <div class="tabs">
            <div class="tabs-nav">
              <a href="#" class="active">Вкладка_3_1</a>
              <a href="#">Вкладка_3_2</a>
              <a href="#">Вкладка_3_3</a>
            </div>
            <div class="tabs-box">
              <div class="active">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At culpa ea provident qui nihil, mollitia debitis, sequi fugit aliquid animi!</p>
              </div>
              <div>
                <div class="tabs">
                  <div class="tabs-nav">
                    <a href="#" class="active">Вкладка_3_2_1</a>
                    <a href="#">Вкладка_3_2_2</a>
                    <a href="#">Вкладка_3_2_3</a>
                  </div>
                  <div class="tabs-box">
                    <div class="active">
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At culpa ea provident qui nihil, mollitia debitis, sequi fugit aliquid animi!</p>
                    </div>
                    <div>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dolore velit animi omnis quisquam dolor harum suscipit iste nihil non vero voluptates ea, et, pariatur natus in fugiat libero tempora!</p>
        ...

CSS

.example {
  padding: 0;
  margin: 5% auto;
  width: 100%;
  max-width: 600px;
}
.tabs {
  width:100%;
  margin: 0 auto;
  padding: 0;
  border: 1px solid #333;
}
.tabs-nav a {
  color: #fff;
  padding: 4px 6px;
  text-decoration: none;
  background-color: #888;
  display: inline-block;
}
.tabs-nav a.active {
  background-color: #333;
}
.tabs-box > div {
  display: none;
  padding: 10px;
  background: rgba(255,255,255,0.9);
  box-sizing: border-box;
}
.tabs-box > .active {
  display: block;
}

JavaScript

$('.tabs-nav a').click(function(e) {
  var _a = $(this),
      _parent = _a.parents('.tabs'),
      _nav = _parent.children('.tabs-nav').children('a'),
      _box = _parent.children('.tabs-box').children('div');
  
  if (!_a.hasClass('active')) {
    _a.addClass('active')
      .siblings().removeClass('active');
    
    _box.eq(_a.index()).addClass('active')
      .siblings().removeClass('active');
  }
  
  e.preventDefault();
});