<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .hidden {
            display: none;
        }
    </style>
    <title>Show Text on Button Click</title>
</head>
<body>
    <button onclick="showText(1)">Button 1</button>
    <button onclick="showText(2)">Button 2</button>
    <button onclick="showText(3)">Button 3</button>

    <p id="text1" class="hidden">Text for Button 1</p>
    <p id="text2" class="hidden">Text for Button 2</p>
    <p id="text3" class="hidden">Text for Button 3</p>

    <script>
        function showText(buttonNumber) {
            // Hide all text elements
            document.querySelectorAll('p').forEach(function(element) {
                element.classList.add('hidden');
            });

            // Show the text for the clicked button
            document.getElementById(`text${buttonNumber}`).classList.remove('hidden');
        }
    </script>
</body>
</html>
