{"id":632134,"date":"2025-02-13T08:15:59","date_gmt":"2025-02-13T08:15:59","guid":{"rendered":"https:\/\/cherybloemfontein.co.za\/index.php\/elementskit-content\/dynamic-content-megamenu-menuitem215\/"},"modified":"2025-11-13T07:39:45","modified_gmt":"2025-11-13T07:39:45","slug":"dynamic-content-megamenu-menuitem215","status":"publish","type":"elementskit_content","link":"https:\/\/cherybloemfontein.co.za\/index.php\/elementskit-content\/dynamic-content-megamenu-menuitem215\/","title":{"rendered":"dynamic-content-megamenu-menuitem215"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"632134\" class=\"elementor elementor-632134\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d291cab elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-glass-effect-no exad-sticky-section-no\" data-id=\"d291cab\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5e38298 exad-glass-effect-no exad-sticky-section-no\" data-id=\"5e38298\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9fe87f8 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"9fe87f8\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n.models-dropdown {\r\n    position: fixed; \/* Fix it to the screen *\/\r\n    top: 0;\r\n    left: 0;\r\n    width: 65vw;\r\n    z-index: 1000; \/* Ensures it stays above other elements *\/\r\n    background-color: rgba(255, 255, 255, 0.95);\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: stretch;\r\n    overflow: hidden;\r\n    background-color: white;\r\n}\r\n\r\n\/* First Column: Tiggo Logo (20%) *\/\r\n.tiggo-image-container {\r\n    width: 20%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n    background-color: #918982;\r\n    padding: 20px;\r\n}\r\n\r\n\/* Ensures image is positioned at the top *\/\r\n.tiggo-image-container img {\r\n    max-width: 150px;\r\n    height: auto;\r\n    display: block;\r\n    margin-top: 10px;\r\n}\r\n\r\n\/* Second Column: Car Model List (20%) *\/\r\n.model-list {\r\n    width: 20%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 15px;\r\n    background-color: #9d9790;\r\n    min-height: 100%;\r\n}\r\n\r\n\/* Car Model Items *\/\r\n.model-item {\r\n    cursor: pointer;\r\n    padding: 12px;\r\n    font-size: 18px;\r\n    font-weight: bold;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    transition: all 0.3s ease;\r\n    background: #9d9790;\r\n}\r\n\r\n.model-item:hover {\r\n    background: #c2bbb4;\r\n    color: white;\r\n}\r\n\r\n\/* Dropdown (Initially Hidden) *\/\r\n.car-style-list {\r\n    display: none;\r\n    padding-left: 20px;\r\n    margin-top: 5px;\r\n}\r\n\r\n.car-style-box {\r\n    cursor: pointer;\r\n    padding: 8px 10px;\r\n    font-size: 16px;\r\n    color: #555;\r\n    transition: all 0.3s ease;\r\n    background: #dcd4cf;\r\n    margin-bottom: 5px;\r\n}\r\n\r\n.car-style-box:hover {\r\n    background: #9d9790;\r\n    color: white;\r\n}\r\n\r\n\/* Third Column: Car Image and Price (60%) *\/\r\n.car-image-container {\r\n    width: 60%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    text-align: center;\r\n    padding: 20px;\r\n    background: url('https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/02\/tiggo-white.webp') no-repeat center top;\r\n    background-size: 90%;\r\n    background-color: #f2f2f2;\r\n    height: 50vh;\r\n}\r\n\r\n\/* Car Image *\/\r\n.car-image-container img {\r\n    width: 800px;\r\n    max-width: 90%;\r\n    transition: opacity 0.3s ease-in-out;\r\n    display: block;\r\n    margin: auto;\r\n}\r\n\r\n\/* Price & Button Container *\/\r\n.car-info-container {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-top: 20px;\r\n    padding: 15px 25px;\r\n    width: 100%;\r\n}\r\n\r\n\/* Left Side: Price Container *\/\r\n.price-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n}\r\n\r\n\/* \"Starting From\" Text *\/\r\n.starting-from {\r\n    font-size: 14px;\r\n    font-weight: bold;\r\n    color: black;\r\n    text-transform: uppercase;\r\n}\r\n\r\n\/* Car Price *\/\r\n.car-price {\r\n    font-size: 30px;\r\n    font-weight: bold;\r\n    color: black;\r\n}\r\n\r\n\/* Right Side: Button *\/\r\n.explore-btn {\r\n    background: hsla(31, 24%, 53%, 0.8);\r\n    color: white;\r\n    font-size: 18px;\r\n    font-weight: bold;\r\n    padding: 15px 100px;\r\n    border: none;\r\n    cursor: pointer;\r\n    transition: background 0.3s ease-in-out;\r\n    border-radius: 5px;\r\n}\r\n\r\n.explore-btn:hover {\r\n    background: #7c6035;\r\n}\r\n\r\n\/* Active Dropdown Effect *\/\r\n.car-style-list.active {\r\n    display: block;\r\n}\r\n\r\n\/* Rotate Icon for Open Dropdown *\/\r\n.rotate {\r\n    transform: rotate(180deg);\r\n}\r\n<\/style>\r\n\r\n<div class=\"models-dropdown\">\r\n    <!-- First Column: Tiggo Range Image -->\r\n    <div class=\"tiggo-image-container\">\r\n        <img decoding=\"async\" src=\"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/02\/tiggo-white.webp\" alt=\"Tiggo Range Logo\">\r\n    <\/div>\r\n\r\n    <!-- Left Side: Model List -->\r\n    <div class=\"model-list\">\r\n        <!-- Tiggo 4 -->\r\n        <div class=\"model-item\" data-toggle=\"tiggo-4\">\r\n            <img decoding=\"async\" src=\"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/11\/tiggo-4.41bf87b5.webp\" alt=\"Tiggo 4 Pro Logo\" width=\"101\" height=\"25\">\r\n            <span class=\"toggle-icon\">+<\/span>\r\n        <\/div>\r\n        <div class=\"car-style-list\" id=\"tiggo-4\">\r\n            <div class=\"car-style-box clickable-model\" data-car=\"tiggo-4\" data-price=\"R269 000\">Tiggo 4 Pro<\/div>\r\n            <div class=\"car-style-box clickable-model\" data-car=\"tiggo-4-van\" data-price=\"R309 900\">Tiggo 4 Panel Van<\/div>\r\n             <div class=\"car-style-box clickable-model\" data-car=\"cross\" data-price=\"R359 900\">Tiggo 4 Cross<\/div>\r\n            <div class=\"car-style-box clickable-model\" data-car=\"cross-hev\" data-price=\"R439 900\">Tiggo 4 Cross HEV<\/div>\r\n            \r\n        <\/div>\r\n\r\n       \r\n\r\n        <!-- Tiggo 7 -->\r\n        <div class=\"model-item\" data-toggle=\"tiggo-7\">\r\n            <img decoding=\"async\" src=\"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/11\/tiggo-7.648af389.webp\" alt=\"Tiggo 7 Pro\" width=\"101\" height=\"25\">\r\n            <span class=\"toggle-icon\">+<\/span>\r\n        <\/div>\r\n        <div class=\"car-style-list\" id=\"tiggo-7\">\r\n            <div class=\"car-style-box clickable-model\" data-car=\"tiggo-7\" data-price=\"R389 900\">Tiggo 7 Pro<\/div>\r\n            <div class=\"car-style-box clickable-model\" data-car=\"tiggo-7-pro-max\" data-price=\"R469 900\">Tiggo 7 Pro Max<\/div>\r\n                        <div class=\"car-style-box clickable-model\" data-car=\"tiggo-7-new\" data-price=\"R429 900\">Tiggo 7<\/div>\r\n            <div class=\"car-style-box clickable-model\" data-car=\"tiggo-7-phev\" data-price=\"R599 900\">Tiggo 7 PHEV<\/div>\r\n        <\/div>\r\n\r\n        <!-- Tiggo 8 -->\r\n        <div class=\"model-item\" data-toggle=\"tiggo-8\">\r\n            <img decoding=\"async\" src=\"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/11\/tiggo-8.60ee9f0c.webp\" alt=\"Tiggo 8 Pro\" width=\"101\" height=\"25\">\r\n            <span class=\"toggle-icon\">+<\/span>\r\n        <\/div>\r\n        <div class=\"car-style-list\" id=\"tiggo-8\">\r\n            <div class=\"car-style-box clickable-model\" data-car=\"tiggo-8\" data-price=\"R529 900\">Tiggo 8 Pro<\/div>\r\n            <div class=\"car-style-box clickable-model\" data-car=\"tiggo-8-pro-max\" data-price=\"R609 900\">Tiggo 8 Pro Max<\/div>\r\n            <div class=\"car-style-box clickable-model\" data-car=\"tiggo-8-pro-max-my23\" data-price=\"R609 900\">Tiggo 8 Pro Max MY23<\/div>\r\n\r\n            <!-- NEW Tiggo 8 variant -->\r\n            <div class=\"car-style-box clickable-model\" data-car=\"tiggo-8-phev\" data-price=\"R729 900\">\r\n                Tiggo 8 PHEV\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- NEW: Tiggo 9 -->\r\n        <div class=\"model-item\" data-toggle=\"tiggo-9\">\r\n            <!-- Replace this image with the correct Tiggo 9 logo -->\r\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/10\/tiggo-9.webp\" alt=\"Tiggo 9\" width=\"101\" height=\"25\">\r\n            <span class=\"toggle-icon\">+<\/span>\r\n        <\/div>\r\n        <div class=\"car-style-list\" id=\"tiggo-9\">\r\n            <!-- Two new Tiggo 9 variants -->\r\n            <div class=\"car-style-box clickable-model\" data-car=\"tiggo-9\" data-price=\"R689 900\">Tiggo 9<\/div>\r\n            <div class=\"car-style-box clickable-model\" data-car=\"tiggo-9-phev\" data-price=\"R839 900\">Tiggo 9 PHEV<\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Right Side: Car Image and Price -->\r\n    <div class=\"car-image-container\">\r\n        <img decoding=\"async\" id=\"car-display\" src=\"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/02\/tiggo-4.webp\" alt=\"Tiggo 4\" \/>\r\n        <div class=\"car-info-container\">\r\n            <!-- Left: Price Text -->\r\n            <div class=\"price-container\">\r\n                <div class=\"starting-from\">Starting from<\/div>\r\n                <div class=\"car-price\"><span id=\"car-price\">R269 900<\/span><\/div>\r\n            <\/div>\r\n\r\n            <!-- Right: Explore Button -->\r\n            <button class=\"explore-btn\">Explore<\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n    const modelItems = document.querySelectorAll(\".model-item\");\r\n    const carBoxes = document.querySelectorAll(\".car-style-box\");\r\n    const carDisplay = document.getElementById(\"car-display\");\r\n    const carPrice = document.getElementById(\"car-price\");\r\n    const exploreButton = document.querySelector(\".explore-btn\");\r\n\r\n    \/\/ Object containing car image URLs and links\r\n    const carData = {\r\n        \"tiggo-4\": {\r\n            image: \"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/02\/tiggo-4.webp\",\r\n            price: \"R269 900\",\r\n            link: \"https:\/\/cherybloemfontein.co.za\/index.php\/chery-tiggo-4-pro-suv\/\"\r\n        },\r\n        \"tiggo-4-van\": {\r\n            image: \"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/02\/tiggo-4-panel-van.webp\",\r\n            price: \"R339 900\",\r\n            link: \"https:\/\/cherybloemfontein.co.za\/index.php\/tiggo-4-panel-van\/\"\r\n        },\r\n        \"cross\": {\r\n            image: \"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/02\/tiggo-cross.webp\",\r\n            price: \"R399 900\",\r\n            link: \"https:\/\/cherybloemfontein.co.za\/index.php\/tiggo-cross\/\"\r\n        },\r\n        \"cross-hev\": {\r\n            image: \"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/07\/tiggo-cross-hev-2.webp\",\r\n            price: \"R439 900\",\r\n            link: \"https:\/\/cherybloemfontein.co.za\/index.php\/tiggo-cross-hev-2\/\"\r\n        },\r\n        \"tiggo-7\": {\r\n            image: \"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/02\/tiggo-7.webp\",\r\n            price: \"R399 900\",\r\n            link: \"https:\/\/cherybloemfontein.co.za\/index.php\/chery-tiggo-7-pro\/\"\r\n        },\r\n        \"tiggo-7-pro-max\": {\r\n            image: \"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/02\/tiggo-7-max.webp\",\r\n            price: \"R469 900\",\r\n            link: \"https:\/\/cherybloemfontein.co.za\/index.php\/tiggo-7-pro-max\/\"\r\n        },\r\n                \"tiggo-7-new\": {\r\n            image: \"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/11\/tiggo-7-fl.webp\",\r\n            price: \"R429 900\",\r\n            link: \"https:\/\/cherybloemfontein.co.za\/index.php\/tiggo-7-4\/\"\r\n        },\r\n        \"tiggo-7-phev\": {\r\n            image: \"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/07\/tiggo-7-phev-2.webp\",\r\n            price: \"R599 900\",\r\n            link: \"https:\/\/cherybloemfontein.co.za\/index.php\/tiggo-7-phev-2\/\"\r\n        },\r\n        \"tiggo-8\": {\r\n            image: \"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/02\/tiggo-8.webp\",\r\n            price: \"R529 900\",\r\n            link: \"https:\/\/cherybloemfontein.co.za\/index.php\/chery-tiggo-8-pro-suv\/\"\r\n        },\r\n        \"tiggo-8-pro-max\": {\r\n            image: \"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/02\/tiggo-8-max.webp\",\r\n            price: \"R609 900\",\r\n            link: \"https:\/\/cherybloemfontein.co.za\/index.php\/chery-tiggo-8-pro-max\/\"\r\n        },\r\n        \"tiggo-8-pro-max-my23\": {\r\n            image: \"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/02\/tiggo-8-max.webp\",\r\n            price: \"R609 900\",\r\n            link: \"https:\/\/cherybloemfontein.co.za\/index.php\/chery-tiggo-8-pro-max-my23\/\"\r\n        },\r\n\r\n        \/* NEW Tiggo 8 variant\r\n           Update image, price and link as needed *\/\r\n        \"tiggo-8-phev\": {\r\n            image: \"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/11\/tiggo-8-phev-1.webp\",\r\n            price: \"R729 900\",\r\n            link: \"https:\/\/cherybloemfontein.co.za\/index.php\/tiggo-8-csh\/\"\r\n        },\r\n\r\n        \/* NEW Tiggo 9 variants\r\n           Replace placeholder image URLs and links with real ones *\/\r\n        \"tiggo-9\": {\r\n            image: \"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/11\/tiggo-9-1.webp\",\r\n            price: \"R689 900\",\r\n            link: \"https:\/\/cherybloemfontein.co.za\/index.php\/tiggo-9-2\/\"\r\n        },\r\n        \"tiggo-9-phev\": {\r\n            image: \"https:\/\/cherybloemfontein.co.za\/wp-content\/uploads\/2025\/11\/tiggo-9-phev-1.webp\",\r\n            price: \"R839 900\",\r\n            link: \"https:\/\/cherybloemfontein.co.za\/index.php\/tiggo-9-csh\/\"\r\n        }\r\n    };\r\n\r\n    \/\/ Toggle dropdown on click\r\n    modelItems.forEach(model => {\r\n        model.addEventListener(\"click\", function () {\r\n            let subListId = this.getAttribute(\"data-toggle\");\r\n            let subList = document.getElementById(subListId);\r\n\r\n            if (subList) {\r\n                subList.classList.toggle(\"active\");\r\n\r\n                \/\/ Close other dropdowns when one is opened\r\n                document.querySelectorAll(\".car-style-list\").forEach(list => {\r\n                    if (list.id !== subListId) {\r\n                        list.classList.remove(\"active\");\r\n                    }\r\n                });\r\n            }\r\n        });\r\n    });\r\n\r\n    \/\/ Change car image, price, and button link on sub-option click\r\n    carBoxes.forEach(box => {\r\n        box.addEventListener(\"click\", function () {\r\n            let selectedCar = this.getAttribute(\"data-car\");\r\n\r\n            if (carData[selectedCar]) {\r\n                carDisplay.src = carData[selectedCar].image;\r\n                carPrice.textContent = carData[selectedCar].price;\r\n                exploreButton.setAttribute(\"onclick\", \"window.location.href='\" + carData[selectedCar].link + \"'\");\r\n            }\r\n        });\r\n    });\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"author":1,"parent":0,"template":"elementor_canvas","_links":{"self":[{"href":"https:\/\/cherybloemfontein.co.za\/index.php\/wp-json\/wp\/v2\/elementskit-content\/632134"}],"collection":[{"href":"https:\/\/cherybloemfontein.co.za\/index.php\/wp-json\/wp\/v2\/elementskit-content"}],"about":[{"href":"https:\/\/cherybloemfontein.co.za\/index.php\/wp-json\/wp\/v2\/types\/elementskit_content"}],"author":[{"embeddable":true,"href":"https:\/\/cherybloemfontein.co.za\/index.php\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":27,"href":"https:\/\/cherybloemfontein.co.za\/index.php\/wp-json\/wp\/v2\/elementskit-content\/632134\/revisions"}],"predecessor-version":[{"id":632695,"href":"https:\/\/cherybloemfontein.co.za\/index.php\/wp-json\/wp\/v2\/elementskit-content\/632134\/revisions\/632695"}],"wp:attachment":[{"href":"https:\/\/cherybloemfontein.co.za\/index.php\/wp-json\/wp\/v2\/media?parent=632134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}