Flap system with jQuery

Question

Guys I set up a flap system using jQuery. Follow it below.

$('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

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

.tabs-container{
    margin: 0 auto;
}
ul.tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
    border-bottom: 1px solid #d7d7d7;
}
ul.tabs li{
    background: none;
    color: #616161;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}
ul.tabs li.current{
    color: #484848;
    border-bottom: 2px solid #F65314;
}
.tab-content{
    display: none;
    padding: 15px;
}
.tab-content.current{
    display: inherit;
}
.tab-link:hover {
    color: #FBBC05;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="tabs-container">

                <ul class="tabs">
                    <li class="tab-link current" data-tab="tab-1">Tab 1</li>
                    <li class="tab-link" data-tab="tab-2">Tab 2</li>
                </ul>

                <div id="tab-1" class="tab-content current">
                bla bla bla 
                </div>
                <div id="tab-2" class="tab-content">
                    bla bla bla <br> bal bal balbla bla bla <br> bal bal bal
                </div>
               

            </div>

Well the system is working very well, but I have the following and structure:

<ul class="tabs">

Here is all the good stuff, and:

<div id="tab-2" class="tab-content">

Here is the content of each tab, to facilitate wanted to change the strict to the next:

        <div class="tabs-container">

            <li class="tab-link current" data-tab="tab-1">Tab 1</li>
            <div id="tab-1" class="tab-content current">
            bla bla bla 
            </div>


            <li class="tab-link" data-tab="tab-2">Tab 2</li>
            <div id="tab-2" class="tab-content">
                bla bla bla <br> bal bal balbla bla bla <br> bal bal bal
            </div>


        </div>

This out whenever I was going to add a new tab just I put the following:

           <li class="tab-link" data-tab="tab-2">Tab 2</li>
            <div id="tab-2" class="tab-content">
                bla bla bla <br> bal bal balbla bla bla <br> bal bal bal
            </div>

Could someone help me?

Answer 1

Just a suggestion, when I make flap system use the same structure you use, but I create the li dynamically navigational.

So you don’t even need to add them, just go through the div.tab-content:

$('.tab-content').each(function(i) {
    var tabTitle = $(this).data('tab-title');
    var current = $(this).hasClass('current') ? "current" : "";
    var newTab = $('<li class="tab-link"></li>');
    newTab.html(tabTitle)
   .addClass(current)
   .attr('data-tab', $(this).attr('id'));
   $('ul.tabs').append(newTab)
 })

In HTML what only changed was the addition data-tab-title that defines the tab title to be shown.

Upshot:

$(document).ready(function() {
  $('.tab-content').each(function(i) {
    var tabTitle = $(this).data('tab-title');
    var current = $(this).hasClass('current') ? "current" : "";
    var newTab = $('<li class="tab-link"></li>');
    newTab.html(tabTitle)
      .addClass(current)
      .attr('data-tab', $(this).attr('id'));
    $('ul.tabs').append(newTab)
  })

  $(document).on('click', '.tabs li', function() {
    var tab_id = $(this).attr('data-tab');

    $('.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

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

})

.tabs-container {
  margin: 0 auto;
}
ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
  border-bottom: 1px solid #d7d7d7;
}
ul.tabs li {
  background: none;
  color: #616161;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
}
ul.tabs li.current {
  color: #484848;
  border-bottom: 2px solid #F65314;
}
.tab-content {
  display: none;
  padding: 15px;
}
.tab-content.current {
  display: block;
}
.tab-link:hover {
  color: #FBBC05;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="tabs-container">
  <ul class="tabs"></ul>
  
  <div id="tab-1" data-tab-title="Tab 1" class="tab-content current">
    bla bla bla
  </div>
  <div id="tab-2" data-tab-title="Tab 2" class="tab-content">
    bla bla bla
    <br>bal bal balbla bla bla
    <br>bal bal bal
  </div>
  <div id="tab-3" data-tab-title="Tab 3" class="tab-content">
    bla bla bla 2
    <br>bal bal balbla bla bla
    <br>bal bal bal
  </div>
</div>