Fiz um botão que esconde e mostra o meu select e eu queria fazer com que se eu entra-se no site em mobile começava com os selects escondidos e só depois de clicar e que os mostrava.
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>
Meu 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: Estou a usar AJAX.
style="display:none;"
nadiv
principal do seu filtro?