The Dream Stream

<!-- Single Toggle Button -->
<button id="toggle-all">Expand All</button>

<!-- Accessible Styling for Buttons -->
<style>
    /* Center the button and add styling */
    #toggle-all {
        display: inline-block;
        padding: 12px 24px;
        margin: 10px auto;
        font-weight: bold;
        color: white;
        background-color: #0057B7; /* Accessible Blue */
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    /* Hover effect */
    #toggle-all:hover {
        background-color: #004494; /* Darker blue */
        transform: scale(1.05);
    }

    /* Active effect when clicking */
    #toggle-all:active {
        background-color: #003577; /* Even darker blue */
        transform: scale(0.98);
    }

    /* Ensure focus is visible for keyboard users */
    #toggle-all:focus {
        outline: 3px solid #FFD700; /* High-contrast gold outline */
    }

    /* Style when the button is in 'Collapse All' state */
    #toggle-all.collapse-mode {
        background-color: #A51C30; /* Accessible Red */
    }

    #toggle-all.collapse-mode:hover {
        background-color: #841726; /* Darker red */
    }

    #toggle-all.collapse-mode:active {
        background-color: #6A1220; /* Even darker red */
    }
</style>

<!-- JavaScript for expanding/collapsing accordions -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    const toggleButton = document.getElementById("toggle-all");

    /**
     * Toggles all accordions open or closed.
     * @param {boolean} open - If true, expands all accordions; if false, collapses them.
     */
    function toggleAllAccordions(open) {
        const accordions = document.querySelectorAll('.accordion-header');

        accordions.forEach(header => {
            const content = header.nextElementSibling;
            
            if (content && content.classList.contains("accordion-content")) {
                // Check if accordion is open
                const isOpen = header.getAttribute("aria-expanded") === "true" ||
                               (!header.hasAttribute("aria-expanded") && window.getComputedStyle(content).display !== "none");

                if (open && !isOpen) {
                    header.click(); // Open if closed
                } else if (!open && isOpen) {
                    header.click(); // Close if open
                }
            }
        });

        // Update button text
        toggleButton.textContent = open ? "Collapse All" : "Expand All";
    }

    /**
     * Determines if all accordions are open or closed and toggles accordingly.
     */
    function handleToggleButton() {
        const accordions = document.querySelectorAll('.accordion-header');
        const anyClosed = [...accordions].some(header => {
            const content = header.nextElementSibling;
            return content && content.classList.contains("accordion-content") &&
                   (header.getAttribute("aria-expanded") !== "true" &&
                    window.getComputedStyle(content).display === "none");
        });

        toggleAllAccordions(anyClosed); // Expand if any are closed, otherwise collapse
    }

    // Attach event listener to toggle button
    toggleButton.addEventListener("click", handleToggleButton);
});
</script>

here is some text to show that the expand all and collapse all buttons work