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";
}
}