word-games-theme 3.3.6 → 3.3.7

data/_includes/wordgames/infographics/infographics.html

@@ -30,10 +30,6 @@
     }
 
     @media (max-width: 768px) {
-        .infographics-title {
-            width: auto !important;
-        }
-
         .modal-arrow-btn {
             top: 30%;
             width: 40px;
@@ -123,100 +119,12 @@
     .close1:hover {
         color: #ccc;
     }
-
-    #left {
-        left: 3%;
-        z-index: 99;
-    }
-
-    #right {
-        right: 3%;
-        z-index: 99;
-    }
-
-    .inforgraphics_section .wrapper i {
-        top: 50%;
-        height: 44px;
-        width: 44px;
-        color: #343f4f;
-        cursor: pointer;
-        font-size: 2.15rem;
-        position: absolute;
-        text-align: center;
-        line-height: 44px;
-        background: #eee;
-        border-radius: 50%;
-        transform: translateY(-50%);
-        transition: transform 0.1s linear;
-    }
-</style>
-
-<style>
-    /* Common styles for carousel arrow buttons */
-    .carousel-control {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 38px;
-        height: 38px;
-        border: none;
-        border-radius: 50%;
-        background: rgba(0, 0, 0, 0.4);
-        backdrop-filter: blur(4px);
-        cursor: pointer;
-        z-index: 10;
-    }
-
-    /* Left button */
-    .carousel-control.left {
-        left: 10px;
-    }
-
-    /* Right button */
-    .carousel-control.right {
-        right: 10px;
-    }
-
-    /* Arrow icon inside button (pseudo-element) */
-    .carousel-control.left::before {
-        content: "\276E";
-        color: white;
-        font-size: 18px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-
-    .carousel-control.right::before {
-        content: "\276F";
-        color: white;
-        font-size: 18px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-
-    /* Touch feel improve */
-    .carousel-control:active {
-        background: rgba(0, 0, 0, 0.6);
-    }
-
-    /* Hide on desktop */
-    @media (min-width: 769px) {
-
-        #leftBtn,
-        #rightBtn {
-            display: none !important;
-        }
-    }
 </style>
 <div class="container" id="infographicsContainer">
     <h3 class="mb-5 infographics-title" style="width:445px"><b>Other useful information</b></h3>
     <div class="inforgraphics_section">
         <div class="wrapper">
-            <button id="leftBtn" class="carousel-control left" aria-label="Previous slide"></button>
+            <i id="left" class="fas fa-angle-left"></i>
             <div class="carousel">
                 <div class="carousel-inner">
                     {%- if dataToShow.infographics -%} {% for item in dataToShow.infographics %}
@@ -228,7 +136,7 @@
                     {% endfor %} {%- endif -%}
                 </div>
             </div>
-            <button id="rightBtn" class="carousel-control right" aria-label="Next slide"></button>
+            <i id="right" class="fas fa-angle-right"></i>
         </div>
     </div>
     <div id="imageModal1" class="modal1" onclick="closeModal1()">
@@ -244,48 +152,6 @@
 </div>
 
 <script>
-    const carousel = document.querySelector(".carousel-inner");
-    const leftBtn = document.getElementById("leftBtn");
-    const rightBtn = document.getElementById("rightBtn");
-
-    // Update arrow visibility
-    function updateArrows() {
-        const maxScroll = carousel.scrollWidth - carousel.clientWidth;
-
-        if (carousel.scrollLeft <= 0) {
-            leftBtn.style.display = "none";   // hide left
-        } else {
-            leftBtn.style.display = "block";  // show left
-        }
-
-        if (carousel.scrollLeft >= maxScroll - 2) {
-            rightBtn.style.display = "none";  // hide right
-        } else {
-            rightBtn.style.display = "block"; // show right
-        }
-    }
-
-    // Move slides
-    leftBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        let slideWidth = document.querySelector(".slide").offsetWidth;
-        carousel.scrollLeft -= slideWidth;
-        setTimeout(updateArrows, 200);
-    });
-
-    rightBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        let slideWidth = document.querySelector(".slide").offsetWidth;
-        carousel.scrollLeft += slideWidth;
-        setTimeout(updateArrows, 200);
-    });
-
-    // Update on scroll too
-    carousel.addEventListener("scroll", updateArrows);
-
-    // Initial update on load
-    updateArrows();
-
     document.addEventListener("DOMContentLoaded", () => {
         let modal_array_of_images = [];
         let current_modal_img = 0;

data/_includes/wordgames/search-box/search-box.html

@@ -107,4 +107,4 @@
 <div class="container" id="containerWd">
     {% include wordgames/words-data/words-data.html %}
 </div>
-{%- endif -%}
+{%- endif -%}

data/_includes/wordgames-v2/advanced-filter/advanced-filter.html

@@ -0,0 +1,421 @@
+<style>
+    .filter_val {
+        width: 150px;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+    }
+
+    .filter-tooltip {
+        cursor: pointer;
+        margin-left: 5px;
+    }
+
+    .dropdown-content {
+        display: none;
+        /* position: absolute; */
+        background-color: #fff;
+        min-width: 150px;
+        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+        z-index: 1;
+        max-height: 300px;
+        height: auto;
+        overflow-y: hidden;
+        overflow-x: auto;
+        border-radius: 8px;
+    }
+
+    .dropdown-content a {
+        color: black;
+        padding: 12px;
+        text-decoration: underline;
+        display: block;
+        font-size: 16px;
+        font-weight: 900;
+    }
+
+    .dropdown-content a:hover {
+        background-color: #f1f1f1;
+    }
+
+    .show {
+        display: block;
+    }
+
+    .tooltip-container {
+        position: relative;
+        display: inline-block;
+    }
+
+    .startsWith {
+        position: relative;
+        display: inline-block;
+    }
+
+    .arrow-down {
+        display: none;
+        width: 0;
+        height: 0;
+        border-left: 10px solid transparent;
+        /* Increased size */
+        border-right: 10px solid transparent;
+        /* Increased size */
+        border-top: 10px solid #000;
+        /* Increased size and color */
+        position: absolute;
+        bottom: -8px;
+        /* Adjust vertical positioning */
+        left: calc(50% - 10px);
+        /* Center the larger arrow */
+    }
+
+    @media (max-width: 768px) {
+
+        .dropdown-content,
+        .arrow-down {
+            display: none !important;
+        }
+    }
+</style>
+
+<div class="advancedFilterOptions">
+    <button type="button" value="Advanced Filter" class="filtersOptions" aria-expanded="true" aria-controls="wg-filters" onclick="advancedFilterToggle()">
+        <svg class="wg-filter-ico" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M4 7h10M18 7h2M4 17h2M10 17h10"/><circle cx="16" cy="7" r="2"/><circle cx="8" cy="17" r="2"/></svg>
+        <span>Advanced filters</span>
+        <svg class="wg-filter-chev" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
+    </button>
+    <button type="button" class="wg-reset" hidden>
+        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></svg>
+        Clear all
+    </button>
+</div>
+
+<div class="fillterWrapper my-5 filterShow" id="wg-filters">
+    <div class="startsWith">
+        <input onclick="showDropdown('startsWithDropdown', this)"
+            onkeyup="filterDropdown('startsWithDropdown', this.value)" class="filter_val textBoxes" autocomplete="off"
+            type="text" id="startsWith" placeholder="Starts with" value="" name="prefix">
+        <div class="filter-tooltip" data-tip="Find words that start with these letters(AB-&gt; Able)"
+            id="Find words that start with these letters(AB-&gt; Able)">
+            <img loading="lazy" decoding="async" width="30" height="30" src="/assets/images/questionmark.svg" alt="Question Mark" />
+        </div>
+        <span class="wg-filter-label" aria-hidden="true">Starts with</span>
+        <div class="arrow-down"></div>
+    </div>
+    <div class="endsWith">
+        <input onclick="showDropdown('endsWithDropdown', this)" onkeyup="filterDropdown('endsWithDropdown', this.value)"
+            class="filter_val textBoxes" autocomplete="off" type="text" id="endsWith" placeholder="Ends with"
+            name="suffix">
+        <div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
+            data-tip="Filter for words that ends with these letters" id="Filter for words that ends with these letters">
+            <img loading="lazy" decoding="async" width="30" height="30" src="/assets/images/questionmark.svg" alt="Question Mark" />
+        </div>
+        <span class="wg-filter-label" aria-hidden="true">Ends with</span>
+        <div class="arrow-down"></div>
+    </div>
+    <div class="mustInclude">
+        <input onclick="showDropdown('mustIncludeDropdown', this)"
+            onkeyup="filterDropdown('mustIncludeDropdown', this.value)" class="filter_val textBoxes" autocomplete="off"
+            type="text" id="mustInclude" placeholder="Contains" name="contains">
+        <div class="filter-tooltip" data-tip="Words that contain letters in this order(ab)"
+            id="Words that contain letters in this order(ab)">
+            <img loading="lazy" decoding="async" width="30" height="30" src="/assets/images/questionmark.svg" alt="Question Mark" />
+        </div>
+        <span class="wg-filter-label" aria-hidden="true">Contains</span>
+        <div class="arrow-down"></div>
+    </div>
+    <div class="wordLength same">
+        <input onclick="showDropdown('wordLengthDropdown',this)"
+            onkeyup="filterDropdown('wordLengthDropdown', this.value)" autocomplete="off" type="number"
+            class="filter_val textBoxes" id="wordLength" placeholder="Length" name="length" value="{{page.letter}}">
+
+        <div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
+            data-tip="Filter for words with this length" id="Filter for words with this length">
+            <img loading="lazy" decoding="async" width="30" height="30" src="/assets/images/questionmark.svg" alt="Question Mark" />
+        </div>
+
+        <span class="wg-filter-label" aria-hidden="true">Length</span>
+        <div class="arrow-down"></div>
+    </div>
+    <div class="inculdeWith">
+        <input onclick="showDropdown('inculdeWithDropdown',this)"
+            onkeyup="filterDropdown('inculdeWithDropdown', this.value)" class="filter_val textBoxes" autocomplete="off"
+            type="text" id="inculdeWith" placeholder="Include" value="" name="include">
+        <div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
+            data-tip="Only words that contain the letters you enter here"
+            id="Only words that contain the letters you enter here">
+            <img loading="lazy" decoding="async" width="30" height="30" src="/assets/images/questionmark.svg" alt="Question Mark" />
+        </div>
+        <span class="wg-filter-label" aria-hidden="true">Include</span>
+        <div class="arrow-down"></div>
+
+    </div>
+    <div class="exculdeWith">
+        <input onclick="showDropdown('exculdeWithDropdown',this)"
+            onkeyup="filterDropdown('exculdeWithDropdown', this.value)" class="filter_val textBoxes" autocomplete="off"
+            type="text" id="exculdeWith" placeholder="Exclude" value="" name="exclude">
+        <div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
+            data-tip="Only words that not contain the letters you enter here"
+            id="Only words that not contain the letters you enter here">
+            <img loading="lazy" decoding="async" width="30" height="30" src="/assets/images/questionmark.svg" alt="Question Mark" />
+        </div>
+        <span class="wg-filter-label" aria-hidden="true">Exclude</span>
+        <div class="arrow-down"></div>
+
+    </div>
+
+
+    <div id="startsWithDropdown" class="dropdown-content">
+        <a href="#A" data-value="A">A</a>
+        <a href="#B" data-value="B">B</a>
+        <a href="#C" data-value="C">C</a>
+        <a href="#D" data-value="D">D</a>
+        <a href="#E" data-value="E">E</a>
+        <a href="#F" data-value="F">F</a>
+        <a href="#G" data-value="G">G</a>
+        <a href="#H" data-value="H">H</a>
+        <a href="#I" data-value="I">I</a>
+        <a href="#J" data-value="J">J</a>
+        <a href="#K" data-value="K">K</a>
+        <a href="#L" data-value="L">L</a>
+        <a href="#M" data-value="M">M</a>
+        <a href="#N" data-value="N">N</a>
+        <a href="#O" data-value="O">O</a>
+        <a href="#P" data-value="P">P</a>
+        <a href="#Q" data-value="Q">Q</a>
+        <a href="#R" data-value="R">R</a>
+        <a href="#S" data-value="S">S</a>
+        <a href="#T" data-value="T">T</a>
+        <a href="#U" data-value="U">U</a>
+        <a href="#V" data-value="V">V</a>
+        <a href="#W" data-value="W">W</a>
+        <a href="#X" data-value="X">X</a>
+        <a href="#Y" data-value="Y">Y</a>
+        <a href="#Z" data-value="Z">Z</a>
+    </div>
+    <div id="endsWithDropdown" class="dropdown-content">
+        <a href="#A" data-value="A">A</a>
+        <a href="#B" data-value="B">B</a>
+        <a href="#C" data-value="C">C</a>
+        <a href="#D" data-value="D">D</a>
+        <a href="#E" data-value="E">E</a>
+        <a href="#F" data-value="F">F</a>
+        <a href="#G" data-value="G">G</a>
+        <a href="#H" data-value="H">H</a>
+        <a href="#I" data-value="I">I</a>
+        <a href="#J" data-value="J">J</a>
+        <a href="#K" data-value="K">K</a>
+        <a href="#L" data-value="L">L</a>
+        <a href="#M" data-value="M">M</a>
+        <a href="#N" data-value="N">N</a>
+        <a href="#O" data-value="O">O</a>
+        <a href="#P" data-value="P">P</a>
+        <a href="#Q" data-value="Q">Q</a>
+        <a href="#R" data-value="R">R</a>
+        <a href="#S" data-value="S">S</a>
+        <a href="#T" data-value="T">T</a>
+        <a href="#U" data-value="U">U</a>
+        <a href="#V" data-value="V">V</a>
+        <a href="#W" data-value="W">W</a>
+        <a href="#X" data-value="X">X</a>
+        <a href="#Y" data-value="Y">Y</a>
+        <a href="#Z" data-value="Z">Z</a>
+    </div>
+    <div id="mustIncludeDropdown" class="dropdown-content">
+        <a href="#A" data-value="A">A</a>
+        <a href="#B" data-value="B">B</a>
+        <a href="#C" data-value="C">C</a>
+        <a href="#D" data-value="D">D</a>
+        <a href="#E" data-value="E">E</a>
+        <a href="#F" data-value="F">F</a>
+        <a href="#G" data-value="G">G</a>
+        <a href="#H" data-value="H">H</a>
+        <a href="#I" data-value="I">I</a>
+        <a href="#J" data-value="J">J</a>
+        <a href="#K" data-value="K">K</a>
+        <a href="#L" data-value="L">L</a>
+        <a href="#M" data-value="M">M</a>
+        <a href="#N" data-value="N">N</a>
+        <a href="#O" data-value="O">O</a>
+        <a href="#P" data-value="P">P</a>
+        <a href="#Q" data-value="Q">Q</a>
+        <a href="#R" data-value="R">R</a>
+        <a href="#S" data-value="S">S</a>
+        <a href="#T" data-value="T">T</a>
+        <a href="#U" data-value="U">U</a>
+        <a href="#V" data-value="V">V</a>
+        <a href="#W" data-value="W">W</a>
+        <a href="#X" data-value="X">X</a>
+        <a href="#Y" data-value="Y">Y</a>
+        <a href="#Z" data-value="Z">Z</a>
+    </div>
+    <div id="inculdeWithDropdown" class="dropdown-content">
+        <a href="#A" data-value="A">A</a>
+        <a href="#B" data-value="B">B</a>
+        <a href="#C" data-value="C">C</a>
+        <a href="#D" data-value="D">D</a>
+        <a href="#E" data-value="E">E</a>
+        <a href="#F" data-value="F">F</a>
+        <a href="#G" data-value="G">G</a>
+        <a href="#H" data-value="H">H</a>
+        <a href="#I" data-value="I">I</a>
+        <a href="#J" data-value="J">J</a>
+        <a href="#K" data-value="K">K</a>
+        <a href="#L" data-value="L">L</a>
+        <a href="#M" data-value="M">M</a>
+        <a href="#N" data-value="N">N</a>
+        <a href="#O" data-value="O">O</a>
+        <a href="#P" data-value="P">P</a>
+        <a href="#Q" data-value="Q">Q</a>
+        <a href="#R" data-value="R">R</a>
+        <a href="#S" data-value="S">S</a>
+        <a href="#T" data-value="T">T</a>
+        <a href="#U" data-value="U">U</a>
+        <a href="#V" data-value="V">V</a>
+        <a href="#W" data-value="W">W</a>
+        <a href="#X" data-value="X">X</a>
+        <a href="#Y" data-value="Y">Y</a>
+        <a href="#Z" data-value="Z">Z</a>
+    </div>
+    <div id="exculdeWithDropdown" class="dropdown-content">
+        <a href="#A" data-value="A">A</a>
+        <a href="#B" data-value="B">B</a>
+        <a href="#C" data-value="C">C</a>
+        <a href="#D" data-value="D">D</a>
+        <a href="#E" data-value="E">E</a>
+        <a href="#F" data-value="F">F</a>
+        <a href="#G" data-value="G">G</a>
+        <a href="#H" data-value="H">H</a>
+        <a href="#I" data-value="I">I</a>
+        <a href="#J" data-value="J">J</a>
+        <a href="#K" data-value="K">K</a>
+        <a href="#L" data-value="L">L</a>
+        <a href="#M" data-value="M">M</a>
+        <a href="#N" data-value="N">N</a>
+        <a href="#O" data-value="O">O</a>
+        <a href="#P" data-value="P">P</a>
+        <a href="#Q" data-value="Q">Q</a>
+        <a href="#R" data-value="R">R</a>
+        <a href="#S" data-value="S">S</a>
+        <a href="#T" data-value="T">T</a>
+        <a href="#U" data-value="U">U</a>
+        <a href="#V" data-value="V">V</a>
+        <a href="#W" data-value="W">W</a>
+        <a href="#X" data-value="X">X</a>
+        <a href="#Y" data-value="Y">Y</a>
+        <a href="#Z" data-value="Z">Z</a>
+    </div>
+    <div id="wordLengthDropdown" class="dropdown-content">
+        <a href="#2" data-value="2">2</a>
+        <a href="#3" data-value="3">3</a>
+        <a href="#4" data-value="4">4</a>
+        <a href="#5" data-value="5">5</a>
+        <a href="#6" data-value="6">6</a>
+        <a href="#7" data-value="7">7</a>
+        <a href="#8" data-value="8">8</a>
+        <a href="#9" data-value="9">9</a>
+        <a href="#10" data-value="10">10</a>
+        <a href="#11" data-value="11">11</a>
+        <a href="#12" data-value="12">12</a>
+        <a href="#13" data-value="13">13</a>
+        <a href="#14" data-value="14">14</a>
+        <a href="#15" data-value="15">15</a>
+    </div>
+</div>
+
+<script>
+    /* A search URL hides the filters anyway (wordfinder-home.js adds this same class); do it before first paint so the card never jumps */
+    if (/[?&]search=/.test(location.search)) {
+        document.getElementById("wg-filters").classList.add("hide")
+        /* reserve the results area until the word list arrives, so the content below doesn't jump */
+        document.documentElement.classList.add("wg-searching")
+        setTimeout(() => document.documentElement.classList.remove("wg-searching"), 4000)
+    }
+</script>
+<script>
+    let filterShow = document.querySelector(".filterShow")
+    const isMobile = () => window.matchMedia("(max-width: 767.98px)").matches
+    const filtersVisible = () => !filterShow.classList.contains("hide") &&
+        (isMobile() ? filterShow.classList.contains("d-flex") : !filterShow.classList.contains("wg-filters-closed"))
+    function syncFiltersAria() {
+        const btn = document.querySelector(".filtersOptions")
+        if (btn) btn.setAttribute("aria-expanded", String(filtersVisible()))
+    }
+    function advancedFilterToggle() {
+        if (filterShow.classList.contains("hide")) {
+            /* the word finder hides the filters after a search; this button brings them back */
+            filterShow.classList.remove("hide", "wg-filters-closed")
+            filterShow.classList.add("d-flex")
+        } else {
+            filterShow.classList.toggle("d-flex")
+            if (!isMobile()) filterShow.classList.toggle("wg-filters-closed")
+        }
+        syncFiltersAria()
+    }
+    new MutationObserver(syncFiltersAria).observe(filterShow, { attributes: true, attributeFilter: ["class"] })
+    syncFiltersAria()
+
+    function showDropdown(id, input) {
+        document.querySelectorAll('.dropdown-content').forEach(function (dropdown) {
+            dropdown.style.display = 'none';
+        });
+        document.querySelectorAll('.arrow-down').forEach(function (arrow) {
+            arrow.style.display = 'none';
+        });
+        let dropdown = document.getElementById(id);
+
+        let arrow = input.parentElement.querySelector('.arrow-down');
+
+        if (arrow) {
+            arrow.style.display = "block"
+        }
+        if (dropdown) {
+            dropdown.style.display = 'flex';
+        }
+    }
+
+    function filterDropdown(dropdownId, filterValue) {
+        const dropdown = document.getElementById(dropdownId);
+        dropdown.style.display = "none"
+        document.querySelectorAll('.arrow-down').forEach(function (arrow) {
+            arrow.style.display = 'none';
+        });
+    }
+
+    function handleItemClick(event) {
+        event.preventDefault();
+        const selectedValue = event.target.getAttribute('data-value');
+        console.log(selectedValue.toLowerCase());
+        const dropdownId = event.target.closest('.dropdown-content').id;
+        const inputId = dropdownId.replace('Dropdown', '');
+        document.getElementById(inputId).value = selectedValue
+        document.getElementById(dropdownId).classList.remove('show');
+        document.getElementById(dropdownId).style.display = "none"
+        let arrow = document.getElementById(inputId).parentElement.querySelector('.arrow-down');
+        arrow.style.display = "none"
+        logSubmit(event);
+    }
+    document.querySelectorAll('.dropdown-content a').forEach(item => {
+        item.addEventListener('click', handleItemClick);
+    });
+
+    window.onclick = function(event) {
+        if (!event.target.matches('.filter_val')) {
+            const dropdowns = document.getElementsByClassName("dropdown-content");
+            for (let i = 0; i < dropdowns.length; i++) {
+                dropdowns[i].style.display = "none";
+            }
+            const arrowDown = document.getElementsByClassName("arrow-down");
+            for (let i = 0; i < arrowDown.length; i++) {
+                arrowDown[i].style.display = "none";
+            }
+        }
+    }
+
+
+
+
+
+</script>
+
+</script>

data/_includes/wordgames-v2/faqs/faqs.html

@@ -0,0 +1,35 @@
+{% assign file = page.fileName %}
+{% assign lang = page.lang %}
+{% assign dataToShow = site.data.[page.folderName][lang][file] %}
+<div class="container my-5" id="faqsContainer">
+    <h2 class="feature-highlight-title mb-0">FAQ</h2>
+    {%- if site.ezoicAds -%}
+    <div class="container">
+        <div class="row my-xl-0">
+            <main class="faqs">
+                {% for entry in dataToShow.faqList %}
+                <details>
+                    <summary>
+                        {{entry.Question}}
+                    </summary>
+                    <div class="faq__content">
+                        <p class="faq-answer mb-0">{{entry.Answer}}</p>
+                    </div>
+                </details>
+                {% endfor %}
+            </main>
+        </div>
+    </div>
+    {%- else -%}
+    <div class="faqs mt-5">
+        {% for entry in dataToShow.faqList %}
+        <details class="faq-item">
+            <summary class="faq-question">{{entry.Question}}</summary>
+            <div class="faq-answer">{% assign final_answer = entry.Answer | replace: "$variable", page.value %}{% if final_answer contains "<a" %} {{ final_answer }} {% else %} {{ final_answer | auto_link }} {% endif %}</div>
+        </details>
+        {% endfor %}
+    </div>
+    {%- endif -%}
+</div>
+
+