User:MriFranz/Test/style.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* Hide the checkbox */
        .collapsible-checkbox {
            display: none;
        }
        
        /* Style the label/header that will be clicked */
        .collapsible-label {
            display: block;
            font-weight: bold;
            background-color: #f1f1f1;
            padding: 10px;
            cursor: pointer;
            border-radius: 4px;
            margin-bottom: 0;
            position: relative;
        }
        
        /* Add a plus/minus icon */
        .collapsible-label::after {
            content: '+';
            font-size: 18px;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        /* Style the content container */
        .collapsible-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            background-color: #ffffff;
            border: 1px solid #ddd;
            border-top: none;
            border-radius: 0 0 4px 4px;
            padding: 0 10px;
            box-sizing: border-box;
        }
        
        /* When checkbox is checked, show the content */
        .collapsible-checkbox:checked ~ .collapsible-content {
            max-height: 500px; /* Adjust based on your content's potential height */
            padding: 10px;
        }
        
        /* Change plus to minus when open */
        .collapsible-checkbox:checked ~ .collapsible-label::after {
            content: '-';
        }
        
        /* Optional: Hover effect */
        .collapsible-label:hover {
            background-color: #e8e8e8;
        }