// Function to handle the toggle
    function toggleCollapse(buttonId, contentId) {
        const toggleButton = document.getElementById(buttonId);
        const collapsibleContent = document.getElementById(contentId);
        let isExpanded = true; // Initially expanded

        toggleButton.addEventListener('click', function() {
            if (isExpanded) {
                // Collapse
                collapsibleContent.style.height = collapsibleContent.scrollHeight + 'px'; // Full height for transition
                collapsibleContent.offsetHeight; // Force reflow
                collapsibleContent.style.height = '0'; // Set height to 0 to collapse
                isExpanded = false;
            } else {
                // Expand
                collapsibleContent.style.height = collapsibleContent.scrollHeight + 'px';
                collapsibleContent.addEventListener('transitionend', function onTransitionEnd() {
                    collapsibleContent.style.height = 'auto'; // Set height back to auto after expanding
                    collapsibleContent.removeEventListener('transitionend', onTransitionEnd);
                });
                isExpanded = true;
            }
        });
    }

    // Call the function for each collapsible box
    toggleCollapse('toggleButton1', 'collapsibleContent1');
    toggleCollapse('toggleButton2', 'collapsibleContent2');
    toggleCollapse('toggleButton3', 'collapsibleContent3');
    toggleCollapse('toggleButton4', 'collapsibleContent4');
    toggleCollapse('toggleButton5', 'collapsibleContent5');
    toggleCollapse('toggleButton6', 'collapsibleContent6');
    toggleCollapse('toggleButton7', 'collapsibleContent7');
    // Add more calls if you have more collapsible boxes
