<!DOCTYPE html>
<html>
<head>
<title>Diving Spots</title>
<style>
.location {
margin-bottom: 10px;
cursor: pointer;
}
.details {
display: none;
margin-left: 20px;
}
</style>
<script>
function showDetails(location) {
var details = document.getElementById(location);
if (details.style.display === "none") {
details.style.display = "block";
} else {
details.style.display = "none";
}
}
</script>
</head>
<body>
<h1>Diving Spots</h1>
<div class="location" onclick="showDetails('wolf')">
<h2>Wolf Islands</h2>
</div>
<div id="wolf" class="details">
<p>
At Wolf Islands, you can see a variety of marine life, including hammerhead sharks, whale sharks, sea turtles, and manta rays.
</p>
</div>
<div class="location" onclick="showDetails('darwin')">
<h2>Darwin Islands</h2>
</div>
<div id="darwin" class="details">
<p>
At Darwin Islands, you can enjoy stunning coral reefs, as well as spot whale sharks, dolphins, eagle rays, and many species of tropical fish.
</p>
</div>
</body>
</html>
0 Comentarios