Olá,
Fiz um filtro de filiais para a minha empresa, porém empaquei em uma pendência.
Quero que a pessoa escolha a região da filial e navegue pelo conteúdo desse button e que o conteúdo desapareça, caso ela aperto o mesmo botão ou escolha outra região.
Código atual HTML:
<form style="display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;">
<input id="button"type="button" class="cb" value="Sul" name="1" id="1" onclick="itemSelectS(this)" onblur="showDivAttidS(this)"/>
<input id="button"type="button" class="cb" value="Sudeste" name="2" id="2" onclick="itemSelectSE(this)" onblur="showDivAttidSE(this)"/>
<input id="button"type="button" class="cb" value="Centro - Oeste" name="3" id="3" onclick="itemSelectCO(this)" onblur="showDivAttidCO(this)"/>
<input id="button"type="button" class="cb" value="Norte / Nordeste" name="4" id="4" onclick="itemSelectNEN(this)" onblur="showDivAttidNEN(this)"/>
</form>
<div style="display:none" id="1">Nenhuma filial cadastrada!</div>
<div style="display:none" id="2">Nenhuma filial cadastrada!</div>
<div style="display:none" id="3">Nenhuma filial cadastrada!</div>
<div style="display:none" id="4">Nenhuma filial cadastrada!</div>
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
CSS:
#button {
background-color:rgba(110, 74, 74, 0.103);
border-color: #415f78 ;
border-width: 3px;
width: 450px;
height: 50px;
border-radius: 5px;
}
#button[value]{
color: #415f78;
}
#button:hover{
background-color: #415f78;
border-color: forestgreen;
-webkit-transition-delay: 0.1s;
-moz-transition: .1s all;
-moz-transition-delay: 0.1s;
-ms-transition: .1s all;
-ms-transition-delay: 0.1s;
-o-transition: .1s all;
-o-transition-delay: 0.1s;
transition: .1s all;
transition-delay: 0.1s;
}
#button[value]:hover{
color: white;
-webkit-transition-delay: 0.1s;
-moz-transition: .1s all;
-moz-transition-delay: 0.1s;
-ms-transition: .1s all;
-ms-transition-delay: 0.1s;
-o-transition: .1s all;
-o-transition-delay: 0.1s;
transition: .1s all;
transition-delay: 0.1s;
}
JS:
function itemSelectS() {
document.getElementById('1').style.display = "block";
}
function itemSelectSE() {
document.getElementById('2').style.display = "block";
}
function itemSelectCO() {
document.getElementById('3').style.display = "block";
}
function itemSelectNEN() {
document.getElementById('4').style.display = "block";
}
function showDivAttidS(){
document.getElementById("1").style.display = 'none';
}
function showDivAttidSE(){
document.getElementById("2").style.display = 'none';
}
function showDivAttidCO(){
document.getElementById("3").style.display = 'none';
}
function showDivAttidNEN(){
document.getElementById("4").style.display = 'none';
}
Do jeito que está, caso eu clique em algum link, ou qualquer coisa do conteúdo, ele desaparece como se tivesse fechado, devido ao onblur.Procurei por pessoas que tenham passado por algo parecido mas não encontrei a solução.