Problem making input appear and disappear with jquery

Navigation
1

I need to have some inputs in my form mobile version hidden and displayed when I click on the button called Busca avançada I created a code jQuery more is not working do not know what I'm doing wrong remembering that I am using bootstrap 4 follows my codes:

HTML:

                                                                          Type                                                              Information period                                 2                                 3                                 4                                 5                                                                                                            Number                                                                                                            Year                                                              Choose a year                                 2                                 3                                 4                                 5                                                                                                            Search by term                                                                                                             Search                                                                
            <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";
    }
}
    
asked by anonymous 16.08.2018 / 06:34

1 answer

1

If you only display the contents of div you can do as in the example, but, here are some considerations:

  
  • 1 - If you leave the class d-sm-none in the button as your code is, the button will stay with display none and you will not have to click it to appear the div that you want.
    •   
  • 2 - You said you made a code with jQuery , but your example is Javascript .
    •   
  • 3 - Because it did not work, document.getElementByClassName () returns a NodeList , that is, an array of elements that can be accessed, you must enter an index such as [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>
    
16.08.2018 / 15:35
Upload image and get its dimensions Read line by TXT line and return to end (PHP)