<!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>