JqueryPlugin

by Shivani Gupta

HTML

<body>
<div class="container">
<nav>	
	<select class="tabMenu">
		<option value="tab1Content">Tab1</option>
		<option value="tab2Content">Tab2</option>
		<option value="tab3Content">Tab3</option>
	</select>
	<ul id="tabContent">
	    <li class='active'><a href='#tab1Content'>Tab1</a></li>
	    <li><a href='#tab2Content'>Tab2</a></li>
	    <li><a href='#tab3Content'>Tab3</a></li>
	 </ul> 
</nav>	 
	<div id="tab1Content" class="activeTabContent">
		<p>
		  A city is a large and permanent human settlement.[1][2] Although there is no agreement on how a city is distinguished from a town in eneral English language meanings, many cities have a particular administrative, legal, or historical status based on local law. 
		</p>
	</div>
	<div id='tab2Content' class='hidecontent'>
		<p>
			 Cities generally have complex systems for sanitation, utilities, land usage, housing, and transportation. The concentration of development greatly facilitates interaction between people and businesses, sometimes benefiting both parties in the process, but it also presents challenges to managing urban growth. 
		</p>
	</div>
	<div id='tab3Content' class='hidecontent'>
		<p>
			A big city or metropolis usually has associated suburbs and exurbs. Such cities are usually associated with metropolitan areas and urban areas, creating numerous business commuters traveling to urban centers for employment.
		</p>
	</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
		<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

CSS

li{
  display:inline-block;
  background-color:#d8d8d8;
  margin-right:0.3px;
  height: 30px;
  width: 60px;
  text-align: center;
}
a{
  display:inline-block;
  text-decoration:none;
}
#tab1Content,#tab2Content,#tab3Content{
  background-color:#f2f2f2;
}
body{
  background-color:#87e0fd;

}
.hidecontent{ 
  display:none;
}
.active{
  background-color:#f2f2f2;
}
#tabContent{
  padding-left:0px;
  margin-bottom: 0px;
}
.container{
  margin-top:30px;
}
.activeTabContent{
  display:block;
}
select{
  display:none;
}

@media only screen and (max-width: 600px) {
  nav ul {
  display: none;
  }
}

JavaScript

$(document).ready(function(){
	$('li').click(function(){
		var activeTab =  $('.active');
		$(activeTab).removeClass('active');
		$(this).addClass("active");
		var hrefDiv = $('li.active a').attr('href');
		var activeDiv = $('.activeTabContent');
		$(activeDiv).removeClass('activeTabContent');
		$(activeDiv).addClass('hidecontent');
		$(hrefDiv).addClass('activeTabContent');
	});
});