<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
div.tab {
float: left;
border: 5px solid #ccc;
background-color: #eed6d6;
width: 10%;
height:140px;
}
div.tab button {
display: inline;
background-color: pink;
color: black;
padding: 10px 15px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
div.tab button:hover {
background-color: hotpink;
}
div.tab button.active {
background-color: green;
color: white;
}
.tabcontent {
float: left;
padding: 0px 12px;
border: 5px solid #ccc;
width: 30%;
border-left: none;
height:140px;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="LondonClick">Hyderabad</button>
<button class="tablinks" onclick="openCity(event, 'Paris')" id="ParisClick">Banglore</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')" id="TokyoClick">Chennai</button>
</div>
<div id="London" class="tabcontent">
<h3>Hyderabad</h3>
<p>Hyderabad is the capital city of Telangana.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Banglore</h3>
<p>Banglore is the capital of Karnataka.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Chennai</h3>
<p>Chennai is the capital of Tamilnadu.</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("LondonClick").click();
var cities = ["London", "Paris", "Tokyo"];
var cityIndex = 1;
setInterval(function () {
if (cityIndex > 2) {
cityIndex = 0;
document.getElementById(cities[cityIndex] + "Click").click();
cityIndex++;
} else {
document.getElementById(cities[cityIndex] + "Click").click();
cityIndex++;
}
}, 2000);
</script>
</body>
</html>