Branch Filter Using Buttons

Question

Hello,

I made a branch filter for my company, but I put up a backlog.

I want the person to choose the region of the subsidiary and browse the content of that button and that the content will disappear if she presses the same button or chooses another region.

Current HTML code:

<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';

}

The way it is, in case I click on any link, or anything of the content, it disappears as if it had closed, due to onblur.I’ve looked for people who’ve been through something like this but I haven’t found the solution.

Answer 1

Dude, you don’t have to repeat so many functions. With only 2 functions you get what you need.

Now, do not repeat id’s, it is incorrect in HTML. Otherwise, do not use id names starting with number (see this documentation).

With this, I removed the id’s of the Uttons (not required), as you can take the value of the name and pass as id of each div.

With only two functions, one for the click and the other for the Blur, you can do everything you want according as explained:

function itemSelect(e) {
   var el = document.getElementById(e.name); // pega o elemento
   // alterna entre "block" e "none"
   el.style.display = el.style.display == "none" ? "block" : "none";
}

function showDivAttid(){
   // oculta todas as divs
   var divs = document.querySelectorAll(".divs");
   for(var x=0; x < divs.length; x++){
      divs[x].style.display = 'none';
   }
}

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

<form style="display: flex; flex-wrap: wrap; align-items: center; justify-content: center;">
   <input id="button"type="button" class="cb" value="Sul" name="r1" onclick="itemSelect(this)" onblur="showDivAttid()"/>
   <input id="button"type="button" class="cb" value="Sudeste" name="r2" onclick="itemSelect(this)"  onblur="showDivAttid()"/>
   <input id="button"type="button" class="cb" value="Centro - Oeste" name="r3" onclick="itemSelect(this)" onblur="showDivAttid()"/>
   <input id="button"type="button" class="cb" value="Norte / Nordeste" name="r4" onclick="itemSelect(this)" onblur="showDivAttid()"/>
</form>

<div class="divs" style="display:none" id="r1">S: Nenhuma filial cadastrada!</div>
<div class="divs" style="display:none" id="r2">SE: Nenhuma filial cadastrada!</div>
<div class="divs" style="display:none" id="r3">CW: Nenhuma filial cadastrada!</div>
<div class="divs" style="display:none" id="r4">NE: Nenhuma filial cadastrada!</div>