1

Preciso fazer que alguns inputs no meu form da versão mobile fiquem ocultos e sejam exibidos ao clicar no botão chamado Busca avançada criei um código jQuery mais não está funcionando não sei o que estou fazendo de errado lembrando que estou usando bootstrap 4 segue os meus códigos:

HTML:

Tipo Periodo de informação 2 3 4 5 Número Ano Escolha um ano 2 3 4 5 Busque por termo Buscar
            <button class="d-block d-sm-none advanced-btn" onclick="myFunction()">Busca avançada <i class="fas fa-caret-down"></i></button>

SCSS:

.advanced-btn{
    border: 0;
    background-color: transparent;
    outline: none;
}
@media (max-width: $screen-xs-min) {
    .myDIV{
        display: none;
    }
}

JS:

function myFunction() {
    var x = document.getElementsByClassName("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

1 Resposta 1

1

Cara se for só exibir o conteúdo da div pode fazer como no exemplo, mas, segue algumas considerações:

  • 1 - Se você deixar a classe d-sm-none no botão como está seu código, o botão vai ficar com display none e não vai ter como clicá-lo para aparecer a div que você quer.
  • 2 - Você disse que fez um código com jQuery, mas o seu exemplo está com Javascript.
  • 3 - Pq não deu certo, o document.getElementByClassName() por padrão retorna uma NodeList, ou seja, um array de elementos, que para poderem ser acessados é preciso indicar um índice como por exemplo [0].

var x = document.getElementsByClassName("myDIV");
x[0].style.display = "none";

function myFunction(){

    if(x[0].style.display == "none"){
      x[0].style.display = "block";
    }else{
      x[0].style.display = "none";
    }

    // x[0] pega a primeira div, se tivesse uma outra div com esta classe 
    // vc pegaria ela com x[1]
    
}
#myDIV{
  margin: 10% 25%;
}
.advanced-btn{
    border: 0;
    background-color: transparent;
    outline: none;
}
@media (max-width: $screen-xs-min) {
    .myDIV{
        display: none;
    }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

<button class="btn d-block advanced-btn" onclick="myFunction();">Busca avançada <i class="fas fa-caret-down"></i></button>

<div class="myDIV" id="myDIV">
  <input class="form-control" type="text" placeholder="texto qualquer">
  <br>
  <input class="form-control" type="text" placeholder="texto qualquer">
</div>

3
  • ele não fecha de volta ? precisava que fecha-se tbm 18/08/2018 às 0:10
  • Editei a resposta Kirito.
    – LeAndrade
    18/08/2018 às 20:18
  • 1
    Se a resposta lhe foi útil, considere aceitá-la para que a mesma possa ser fechada no site.
    – LeAndrade
    21/08/2018 às 17:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .