# QSG

<div class="custom-container">
    <header>
        <!-- Dropdown Menu -->
        <div class="dropdown" id="product-dropdown">
            <div class="dropdown-selected" onclick="toggleDropdown()">LUBA Series</div>
            <div class="dropdown-options" id="dropdown-options">
                <div class="dropdown-option" onclick="selectOption('luba2', 'LUBA Series')">LUBA Series</div>
                <div class="dropdown-option" onclick="selectOption('yuka', 'YUKA Series')">YUKA Series</div>
            </div>
        </div>
        <!-- Product Image -->
        <img src="/uploads/images/luba2.webp" alt="Product Image" id="product-image" class="product-image">
    </header>
    <hr>
    <!-- Accordion Items -->
    <div class="accordion-item">
        <input type="checkbox" id="accordion-1">
        <label for="accordion-1" class="accordion-label">Unboxing</label>
        <div class="accordion-content">
            <ul>
                <li><a href="/books/luba-series/page/unboxing-video">Unboxing Video</a></li>
            </ul>
        </div>
    </div>
    <div class="accordion-item">
        <input type="checkbox" id="accordion-2">
        <label for="accordion-2" class="accordion-label">Quick Start Guide</label>
        <div class="accordion-content">
            <ul>
                <li><a href="/books/luba-series/page/quick-start">How to install 4G SIM Card</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    const productImages = {
        luba2: '/uploads/images/luba2.webp', // Replace with actual uploaded image URL
        yuka: '/uploads/images/yuka.webp'   // Replace with actual uploaded image URL
    };
    // Toggle dropdown visibility
    function toggleDropdown() {
        const dropdownOptions = document.getElementById("dropdown-options");
        dropdownOptions.style.display = dropdownOptions.style.display === "block" ? "none" : "block";
    }
    // Handle dropdown selection
    function selectOption(id, label) {
        const selected = document.querySelector(".dropdown-selected");
        const productImage = document.getElementById("product-image");   
        selected.textContent = label; // Update dropdown text
        document.getElementById("dropdown-options").style.display = "none"; // Close dropdown
        productImage.src = productImages[id]; // Update product image
    }
    // Attach functions to the global scope for inline event handlers
    window.toggleDropdown = toggleDropdown;
    window.selectOption = selectOption;
});
</script>

<!-- Scoped Styles -->
<style>
/* Container */
.custom-container {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 8px;
    max-width: 800px;
    margin: 0 auto;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
    width: 130px;
}

.dropdown-selected {
    padding: 8px 10px;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

.dropdown-selected::after {
    content: "▼";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

.dropdown-options {
    display: none;
    position: absolute;
    z-index: 10;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 4px;
    width: 100%;
}

.dropdown-option {
    padding: 8px 10px;
    font-size: 16px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.dropdown-option:last-child {
    border-bottom: none;
}

.dropdown-option:hover {
    background-color: #f0f0f0;
}

/* Product Image */
.product-image {
    width: 120px;
    height: auto;
    border-radius: 8px;
}

/* Accordion */
.accordion-item {
    border-bottom: 1px solid #ddd;
    margin-top: 10px;
}

.accordion-label {
    display: block;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    background-color: #fff;
    cursor: pointer;
    border-radius: 4px;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: #fff;
    padding: 0 15px;
    font-size: 16px;
    list-style: none;
    margin: 0;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]:checked + label + .accordion-content {
    max-height: 200px; /* Adjust to fit content */
}

.accordion-content ul {
    padding: 10px 0;
    margin: 0;
    list-style: none;
}

.accordion-content ul li {
    padding: 5px 0;
}

.accordion-content ul li a {
    color: #007bff;
    text-decoration: none;
}

.accordion-content ul li a:hover {
    text-decoration: underline;
}
</style>