testing dynamic vertical tabs

testing dynamic vertical tabs

by Swapnil Dubey

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
	<div class="row">
		<div class="col-md-12">
			
			<p>
			<div id="messagesAlert"></div>
			
			<!-- Nav tabs from Bootstrap 3 -->
			<ul id="myTab" class="nav nav-tabs" role="tablist">
				<li id="li1" class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
				<li id="last"><a href="#addTab"><span class="glyphicon glyphicon-plus"></span> Add Tab</a></li>
			</ul>
			</p>
			<p>
			<!-- Tab panes from Bootstrap 3 -->
			<div class="tab-content">
				<div class="tab-pane fade in active" id="tab1"><p>Content tab 1</p></div>
			</div>
			</p>
			<p>
			<hr></hr>Number of tabs: <span class="badge alert-success" id="displayElem"></span>
			</p>
		</div>
	</div>
</div>

JavaScript

$(function () {
	$('#displayElem').html('1'); // This line is not required (I just up the system and say there is 1 tab in the <div id="messagesAlert"></div> markup)
 
	$('#myTab a[href="#addTab"]').on('click', function () { // Click event on the "Add Tab" button
		var nbrLiElem = ($('ul#myTab li').length) - 1; // Count how many <li> there are (minus 1 because one <li> is the "Add Tab" button)
		
		// Add a <li></li> line before the last-child
		// Including the complete structure: the li ID, the <a href=""></a> etc... check the Bootstrap togglable tabs structure
		$('ul#myTab li:last-child').before('<li id="li' + (nbrLiElem + 1) + '"><a href="#tab' + (nbrLiElem + 1) + '" role="tab" data-toggle="tab">Tab ' + (nbrLiElem + 1) + ' <button type="button" class="btn btn-warning btn-xs" onclick="removeTab(' + (nbrLiElem + 1) + ');"><span class="glyphicon glyphicon-remove"></span></button></a>');
		
		// Add a <div></div> markup after the last-child of the <div class="tab-content">
		$('div.tab-content div:last-child').after('<div class="tab-pane fade" id="tab' + (nbrLiElem + 1) + '"><p>Content tab ' + (nbrLiElem + 1) + '</p></div>');
		nbrLiElem = nbrLiElem + 1; // 1 more element in the tab system
		$('#displayElem').html(nbrLiElem); // This line is not required (I just display, inside the <div id="messagesAlert"></div> markup, how many tabs there is)
	});
});
 
function removeTab(liElem) { // Function remove tab with the <li> number
	if (confirm("Are you sure?")) { // Display "Are you sure message" and wait for you to press "Ok"
		$('ul#myTab > li#li' + liElem).fadeOut(1000, function () { 
			$(this).remove(); // Remove the <li></li> with a fadeout effect
			$('#messagesAlert').text(''); // Empty the <div id="messagesAlert"></div>
		});
		
		$('div.tab-content div#tab' + liElem).remove(); // Also remove the correct <div> inside <div class="tab-content">
		
		$('ul#myTab > li').not('#last').not('#li' + liElem).each(function(i){ // Select all <li> from <ul id="myTab">...