How to avoid repetition of code that does the same thing for different IDs?

Navigation
4

There is an onClick Javascript function for each "Show More". This function changes the visibility of the div to visible to which the default is hidden.

However, as simple as it may be, the code got too big. Is there any way to shorten or shrink this?

Example: just a "Show more" button and a div? So with each click on the "Show more" display a div, one underneath the other? 

<!DOCTYPE html>
<html>
<head>
<style>
  input{
    margin-top: 5px;
}

  input#abreBt{
    margin-left: 100px;
}

  input#bt1{
    margin-left: 50px;
}

  hr{
    width: 300px;
    float: left;
}
</style>
</head>
<body>

<input type="button" name="abreBt" id="abreBt" value="Mostrar mais" onClick="javascript: abreBts1();" />
<div name="divHidden" id="divHidden" style="visibility: hidden;">
  <input type="button" name="bt1" id="bt1" value="+" />
  <input type="button" name="bt2" id="bt2" value="-" /> 
  <input type="button" name="bt3" id="bt3" value="Novo" style="width: 100px;" />
  <input type="button" name="bt4" id="bt4" value="+" /><br><hr><br>
</div>

<input type="button" name="abreBt" id="abreBt" value="Mostrar mais" onClick="javascript: abreBts2();" />
<div name="divHidden" id="divHidden2" style="visibility: hidden;">
  <input type="button" name="bt1" id="bt1" value="+" />
  <input type="button" name="bt2" id="bt2" value="-" /> 
  <input type="button" name="bt3" id="bt3" value="Novo" style="width: 100px;" />
  <input type="button" name="bt4" id="bt4" value="+" /><br><hr><br>
</div>

<input type="button" name="abreBt" id="abreBt" value="Mostrar mais" onClick="javascript: abreBts3();" />
<div name="divHidden" id="divHidden3" style="visibility: hidden;">
  <input type="button" name="bt1" id="bt1" value="+" />
  <input type="button" name="bt2" id="bt2" value="-" /> 
  <input type="button" name="bt3" id="bt3" value="Novo" style="width: 100px;" />
  <input type="button" name="bt4" id="bt4" value="+" /><br><hr><br>
</div>

</body>
</html>
<script>
  function abreBts1(){
    document.getElementById('divHidden').style.visibility="visible";
}

  function abreBts2(){
    document.getElementById('divHidden2').style.visibility="visible";
}

  function abreBts3(){
    document.getElementById('divHidden3').style.visibility="visible";
}
</script>
    
asked by anonymous 09.06.2017 / 14:52

2 answers

3

[Edited] I added the .some class and it is now responsible for adding visibility, so you can always get the first element of this class and remove it. Any questions comment below. 

jQuery('input').click(function(){
  jQuery(jQuery('.some').get(0)).removeClass('some')
});
  input{
    margin-top: 5px;
}

.some{
  visibility: hidden;
}

  input#abreBt{
    margin-left: 100px;
}

  input#bt1{
    margin-left: 50px;
}

  hr{
    width: 300px;
    float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><inputtype="button" name="abreBt" id="abreBt" value="Mostrar mais" />
<div name="divHidden" id="divHidden" class="some">
  <input type="button" name="bt1" id="bt1" value="+" />
  <input type="button" name="bt2" id="bt2" value="-" /> 
  <input type="button" name="bt3" id="bt3" value="Novo" style="width: 100px;" />
  <input type="button" name="bt4" id="bt4" value="+" /><br><hr><br>
</div>
</div>
<div class="t">
  <div name="divHidden" id="divHidden2"  class="some">
  <input type="button" name="bt1" id="bt1" value="+" />
  <input type="button" name="bt2" id="bt2" value="-" /> 
  <input type="button" name="bt3" id="bt3" value="Novo" style="width: 100px;" />
  <input type="button" name="bt4" id="bt4" value="+" /><br><hr><br>
  </div>
</div>
<div>

<div name="divHidden" id="divHidden3"  class="some">
  <input type="button" name="bt1" id="bt1" value="+" />
  <input type="button" name="bt2" id="bt2" value="-" /> 
  <input type="button" name="bt3" id="bt3" value="Novo" style="width: 100px;" />
  <input type="button" name="bt4" id="bt4" value="+" /><br><hr><br>
</div>
</div>
    
09.06.2017 / 16:55
1

First step is to add some reference to div in input , for this you can apply a data-custom . 

(function () {
  var selecionado = document.querySelector(".visivel");
  document.addEventListener("click", function (event) {
    if (event.target.classList.contains("bt-titulo")) {
      var conteudoId = event.target.dataset.conteudo;
      var conteudo = document.getElementById(conteudoId);    
      if (selecionado) 
        selecionado.classList.remove("visivel");
      selecionado = conteudo;
      selecionado.classList.add("visivel");
    }
  });
})();
.div-conteudo {
  display: none;
}

.visivel {
  display: block;
}
<div id="titulos">
  <input type="button" id="titulo1" class="bt-titulo" data-conteudo="conteudo1" value="Mostrar Conteudo 1" />
  <input type="button" id="titulo2" class="bt-titulo" data-conteudo="conteudo2" value="Mostrar Conteudo 2" />
  <input type="button" id="titulo3" class="bt-titulo" data-conteudo="conteudo3" value="Mostrar Conteudo 3" />
</div>
<div id="conteudos">
  <div id="conteudo1" class="div-conteudo visivel">Conteudo 1</div>
  <div id="conteudo2" class="div-conteudo">Conteudo 2</div>
  <div id="conteudo3" class="div-conteudo">Conteudo 3</div>
</div>

Note that in the example above, the click event is associated with document and not input , even if you add input and its div dynamically, the behavior will remain consistent .

Finally, a slightly more complex example.: 

(function () {
  var selected = document.querySelector(".selected");
  var selecionado = document.querySelector(".visivel");
  var onTituloClick = function (event) {
    if (event.target.classList.contains("bt-titulo")) {
      var conteudoId = event.target.dataset.conteudo;
      var conteudo = document.getElementById(conteudoId);    
      if (selecionado) selecionado.classList.remove("visivel");
      if (selected) selected.classList.remove("selected");
      selecionado = conteudo;
      selecionado.classList.add("visivel");
      selected = event.target;
      selected.classList.add("selected");
    }
  }

  document.addEventListener("click", onTituloClick);
  if (selected) {
    onTituloClick({ target: selected });
  }
})();
.div-conteudo {
  display: none;
  box-sizing: border-box;
  border: 1px solid #00796B;
  border-top: 1px solid #009688;
  background-color: #009688;
  padding: 10px 24px;
  color: white;
}

.visivel {
  display: block;
}

#titulos .bt-titulo {
  background-color: #4DB6AC;
  border: 1px solid #00796B;
  border-bottom: 1px solid #009688;
  color: white;
  padding: 10px;
  cursor: pointer;
  float: left;
  box-sizing: border-box;
  width: calc(100% / 3);
}

#titulos .bt-titulo:not(:last-child) {
  border-right: none;
}

#titulos .bt-titulo:not(.selected) {
  border-bottom: 1px solid #00796B;
}

#titulos .bt-titulo:hover {
  background-color: #26A69A;
}

#titulos .bt-titulo.selected {
  background-color: #009688;
}

#titulos:after, #conteudos:after {
  content: "";
  display: table;
  clear: both;
}
<div id="titulos">
  <input type="button" id="titulo1" class="bt-titulo selected" data-conteudo="conteudo1" value="Mostrar Conteudo 1" />
  <input type="button" id="titulo2" class="bt-titulo" data-conteudo="conteudo2" value="Mostrar Conteudo 2" />
  <input type="button" id="titulo3" class="bt-titulo" data-conteudo="conteudo3" value="Mostrar Conteudo 3" />
</div>
<div id="conteudos">
  <div id="conteudo1" class="div-conteudo">Conteudo 1</div>
  <div id="conteudo2" class="div-conteudo">Conteudo 2</div>
  <div id="conteudo3" class="div-conteudo">Conteudo 3</div>
</div>
    
09.06.2017 / 17:18
What's the difference when using binary in the where clause? Select df data according to data from a list