create tabs with append with jquery

Question

I have this script that crate duplication of the selectionform.php according to the number of days that the user select. if the date result is 3 soo i will get 3 days displaying the PHP page one after another.

my question is how can I create a tab for each day? what I get now is the duplication one after another.

    $(document).ready(function() {
        $("#endDate").change(function() {
            var date1 = new Date($("#startDate").val());
            var date2 = new Date($("#endDate").val());
            console.log(date2);
            var timeDiff = Math.abs(date2.getTime() - date1.getTime());
            var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
            $("#dayes").val(diffDays);
            console.log(diffDays);
            $( "#res" ).empty();

            var getDates = function(date1, date2) {
                var dates = [],
                    currentDate = date1,
                    addDays = function(days) {
                        var date = new Date(this.valueOf());
                        date.setDate(date.getDate() + days);
                        return date;

                    };
                while (currentDate < date2) {
                    dates.push(currentDate);
                    currentDate = addDays.call(currentDate, 1);
                }
                return dates;
            };

// Usage



            var dates = getDates(new Date(date1), new Date(date2));

            var i = 1;   dates.forEach(function(date) {
                $('#res').append(" <h3> Day"+i+" - "+date+" </h3>");

                $('#res').append($(" <div class='tab'>" +  i +date).load('selectionform.php',function () {


                }))

                i++;
            });


        });
    });

Answer 1

Here's an example of some code that can manage tabs, including

• Dynamically created tabs
• Multiple tabs on the same page
• Nested tabs within eachother

You should be able to adapt this to what your specific needs are.

I've commented the code pretty comprehensively.

---

Demo

N.B. the tab-index needs to be unique within each tab-wrapper for this to work, but not consecutive. I use an index in the examples below that increases no matter which tab you have add a panel to (i.e. a tab-wrapper could have tabs with indexes 0, 1, 2, 5, 8), depending on how you add tabs using the buttons.

// Keep track of number of tabs
var tabIndex = 0;

// Add three tabs to begin with on page load
for (; tabIndex < 3; tabIndex++) {

  // Add link for tab
  $(".tab-links").append("<h6 class='tab-header' tab-index='" + tabIndex + "'> Tab " + tabIndex + "</h6>");

  // Add tab panel
  $(".tab-panels").append("<div class='tab' tab-index='" + tabIndex + "'>Tab content " + tabIndex + "</div>");

}


// Show first tab by default
// Cycle through each tab wrapper
$(".tab-wrapper").each( function() {

  // Get index for first tab of 
  tindex = $(this).find(".tab-header").first().attr("tab-index");
  
  // Add active to header link
  $(this).find(".tab-header[tab-index='" + tindex + "']").first().addClass("active");
  
  // Add active to panel itself
  $(this).find(".tab[tab-index='" + tindex + "']").first().addClass("active");

});



// Add click event to button to demonstrate dynamic adding of tabs
$(".add-tab").click(function() {

  // Add link for tab
  $(this).closest(".tab-wrapper").find(".tab-links").first().append("<h6 class='tab-header' tab-index='" + tabIndex + "'> Tab " + tabIndex + "</h6>");

  // Add tab panel
  $(this).closest(".tab-wrapper").find(".tab-panels").first().append("<div class='tab' tab-index='" + tabIndex + "'>Tab content " + tabIndex + "</div>");

  // Increase tab index
  tabIndex = tabIndex + 1;

});


// Add click event to headers, including those dynamically created
$(document).on('click', '.tab-header', function() {

  // Remove active classes from that tab group
  $(this).closest(".tab-wrapper").find(".active").removeClass("active");

  // Get tab index  
  tindex = $(this).attr("tab-index");

  // Add active to tab-panel and tab-header
  $(this).closest(".tab-wrapper").find("*[tab-index='" + tindex + "']").addClass("active");

});

.#tab-links {
  width: 100%;
}

.tab-header {
  display: inline-block;
  padding: 4px 8px;
  cursor: pointer;
}

.tab-header:hover,
.tab-header.active {
  background: grey;
  color: white;
}

.tab {
  display: none;
}

.tab.active {
  display: inherit;
}

.tab-wrapper {
  border-bottom: 1px solid grey;
  margin-bottom: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  border-left: 5px solid grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div class="tab-wrapper">

  <button class="add-tab">Add tab</button>

  <div class="tab-links"></div>

  <div class="tab-panels"></div>

</div>


<div class="tab-wrapper">

  <p>Example of a second tab on the page, with a nested tab.</p>

  <button class="add-tab">Add tab</button>

  <div class="tab-links">

    <h6 class='tab-header' tab-index='nested-tab'>
      Nested Tab
    </h6>

  </div>

  <div class="tab-panels">

    <div class='tab' tab-index='nested-tab'>
    
      <div class="tab-wrapper">
        <button class="add-tab">Add tab</button>
        <div class="tab-links"></div>
        <div class="tab-panels"></div>
      </div>

    </div>

  </div>

</div>