<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-Select Dropdown with Checkboxes</title>
    <style>
        .multiselect {
            position: relative;
            display: inline-block;
            width: 200px;
        }

        .selectBox {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .selectBox select {
            width: 100%;
            padding: 10px;
        }

        .overSelect {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .checkboxes {
            display: none;
            border: 1px #dadada solid;
            position: absolute;
            background-color: white;
            width: 100%;
            z-index: 1;
        }

        .checkboxes label {
            display: block;
            padding: 10px;
        }

        .checkboxes label:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>

<div class="multiselect">
    <div class="selectBox" onclick="toggleDropdown()">
        <select>
            <option>Select Sources</option>
        </select>
        <div class="overSelect"></div>
    </div>
    <div id="checkboxes" class="checkboxes">
        <label for="source1">
            <input type="checkbox" id="source1" name="sources[]" value="source1" /> Source 1
        </label>
        <label for="source2">
            <input type="checkbox" id="source2" name="sources[]" value="source2" /> Source 2
        </label>
        <label for="source3">
            <input type="checkbox" id="source3" name="sources[]" value="source3" /> Source 3
        </label>
        <label for="source4">
            <input type="checkbox" id="source4" name="sources[]" value="source4" /> Source 4
        </label>
    </div>
</div>

<script>
    let expanded = false;

    function toggleDropdown() {
        const checkboxes = document.getElementById('checkboxes');
        if (!expanded) {
            checkboxes.style.display = 'block';
            expanded = true;
        } else {
            checkboxes.style.display = 'none';
            expanded = false;
        }
    }

    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
    const selectBox = document.querySelector('.selectBox select option');

    checkboxes.forEach((checkbox) => {
        checkbox.addEventListener('change', () => {
            const selectedValues = Array.from(checkboxes)
                .filter((cb) => cb.checked)
                .map((cb) => cb.value);

            if (selectedValues.length === checkboxes.length) {
                selectBox.textContent = "All selected";
            } else if (selectedValues.length > 3) {
                selectBox.textContent = `${selectedValues.length} of ${checkboxes.length} selected`;
            } else {
                selectBox.textContent = selectedValues.length
                    ? selectedValues.join(', ')
                    : 'Select Sources';
            }
        });
    });
</script>

</body>
</html>
