<div class="advancedFilterOptions" onclick="advancedFilterToggle()">
    <button type="button" value="Advanced Filter" class="filtersOptions">
        Advanced Options
       <img width="22" height="22" src="/assets/images/filter.svg" alt="filter-icon">
    </button>
</div>



<div class="fillterWrapper my-5 filterShow">
    <div class="startsWith">
        <input 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 width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
        </div>
    </div>
    <div class="endsWith">
        <input 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 width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
        </div>
    </div>
    <div class="wordLength same">
        <input 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 width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
        </div>
    </div>
    <div class="inculdeWith">
        <input 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 width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
        </div>
    </div>
    <div class="mustInclude">
        <input 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 width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
        </div>

    </div>

    <div class="exculdeWith">
        <input 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 width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
        </div>
    </div>





</div>

<script>
    let filterShow = document.querySelector(".filterShow")
    function advancedFilterToggle() {
        filterShow.classList.toggle("d-flex")
    }

</script>