Start the site with the hidden filter

Question

I made a button that hides and shows my select and I wanted to make that if I login to the mobile site started with the hidden selects and only after clicking and that showed them.

HTML:

<button id="filtroselects">
  <img src="/imagens/iconbgr.png" height="40px" width="40px"> Filtros
</button>

<div id="escolha">
<form id="selectsfiltro">
    <h6>Faixa Etaria:</h6>
    <select id="FaixaEtaria" class="custom-select">
        <option></option>
        <option value="1">0-17</option>
        <option value="2">18-25</option>
        <option value="3">26-35</option>
        <option value="4">36 ou mais</option>
    </select>

    <br/>
    <br/> 
    <h6>Sexo:</h6>
    <select id="Sexo" class="custom-select">
        <option></option>
        <option value="5">Masc</option>
        <option value="6">Fem</option>
    </select>

    <br/>
    <br/>
    <h6>Recurso a arma:</h6>
    <select id="RecursoArma" class="custom-select">
        <option></option>
        <option value="7">Sim</option>
        <option value="8">Não</option>
    </select>


    <br/>
    <br/>
    <h6>Localidade:</h6>
    <select id="Distrito" class="custom-select">
        <option ></option>
        <option value="9">Viana do Castelo</option>
        <option value="10">Vila Real</option>
        <option value="11">Bragança</option>
        <option value="12">Braga</option>
        <option value="13">Porto</option>
        <option value="14">Aveiro</option>
        <option value="15">Viseu</option>
        <option value="16">Guarda</option>
        <option value="17">Coimbra</option>
        <option value="18">Castelo Branco</option>
        <option value="19">Leiria</option>
        <option value="20">Lisboa</option>
        <option value="21">Santarém</option>
        <option value="22">Portalegre</option>
        <option value="23">Évora</option>
        <option value="24">Setúbal</option>
        <option value="25">Beja</option>
        <option value="26">Faro</option>
        <option value="27">Açores</option>
        <option value="28">Madeira</option>
    </select>
</form>

    <br/>
    <br/>

    <div class="botesdefiltrar">
        <button id="btnBuscar" class="btn btn-outline-warning">Filtrar</button>
        <button type="reset" id="btnLimpar" class="btn btn-outline-warning">Limpar Filtro</button>
  </div>   
  </div>

My script:

function myFunction(x) {
  if (x.matches) {
    
    $(document).ready(function(){
  $("#filtroselects").click(function(){
    $("#escolha").toggle();
  });
});
}}

var x = window.matchMedia("(max-width: 767px)")
myFunction(x)
x.addListener(myFunction)

BBS: I’m using AJAX.

Answer 1

Place the property in your CSS to hide the div:

#escolha{
   display: none;
}

Your Javascript is poorly built. It does not fit $(document).ready within a function.

What you should do is check the width of the screen and fire the event click on the div if the width of the screen is greater than 767 pixels, this way:

<script>
$(document).ready(function(){

   $("#filtroselects").click(function(){
      $("#escolha").toggle();
   });

   if(window.innerWidth > 767){
      $("#filtroselects").click();
   }
});
</script>

This way, if the page opens in resolution less than 768 pixels wide, the div will remain hidden until the button is clicked, and if it is larger, it will appear.