3

Bom dia! Eu montei vários blocos com uma div que por meio do JavaScript, ele interage como se estivesse abrindo uma gaveta (bloco) com um clique e fechando-a com dois cliques por meio de uma função.

Mas porém, quando abre-se um bloco e o outro ao mesmo tempo, os dois ficam abertos na mesma página, tirando o estilo visual da estrutura HTML/CSS. E, quando abre-se todos ao mesmo tempo, fica uma estrutura desorganizada, pois eu defini que os 5 blocos (guias) ocupassem uma largura de 4% e a "gaveta" que iria ser aberta, ficasse com a largura de 80%. Este erro acontece, pois a largura máxima da página vai até 100% e todas as janelas abertas, ultrapassa a largura definida, deixando todos os blocos um embaixo do outro.

function Exibir1() {
  document.getElementById("div01").style.display = "block";
}
function Ocultar1(){
  document.getElementById("div01").style.display = "none";
}
function Exibir2() {
  document.getElementById("div02").style.display = "block";
}
function Ocultar2(){
  document.getElementById("div02").style.display = "none";
}
function Exibir3() {
  document.getElementById("div03").style.display = "block";
}
function Ocultar3(){
  document.getElementById("div03").style.display = "none";
}
function Exibir4() {
  document.getElementById("div04").style.display = "block";
}
function Ocultar4(){
  document.getElementById("div04").style.display = "none";
}
function Exibir5() {
  document.getElementById("div05").style.display = "block";
}
function Ocultar5(){
  document.getElementById("div05").style.display = "none";
}
#blockpop{
  background-color: lightgray;
  width: 4%;
  height: 300px;
  float: left;
  border: 1px solid;
  padding-top: 9%;
  padding-left: 1.9%;
}
h2{
  width: 50%;
}
#textblock{
  transform: rotate(-90deg);
  width: 700%;
  margin-left: -350%;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
}
#div01{background-color: red;}
#div02{background-color: gold;}
#div03{background-color: lightgreen;}
#div04{background-color: royalblue;}
#div05{background-color: pink;}
#div01,#div02,#div03,#div04,#div05{
  width: 80%;
  float: left;
  display: none;
  padding-left: 1%;
  height: 300px;
  overflow-x: auto;
}
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <div id="blockpop" onclick="Exibir1()" ondblclick="Ocultar1()">
        <div id="textblock">BLOCO 1</div>
    </div>
    <div id="div01">
        <h2>BLOCO 1</h2>
        <b>conteúdo</b><br>
    </div>
    <div id="blockpop" onclick="Exibir2()" ondblclick="Ocultar2()">
        <div id="textblock">BLOCO 2</div>
    </div>
    <div id="div02">
        <h2>BLOCO 2</h2>
        <b>conteúdo</b>
    </div>
    <div id="blockpop" onclick="Exibir3()" ondblclick="Ocultar3()">
        <div id="textblock">BLOCO 3</div>
    </div>
    <div id="div03">
        <h2>BLOCO 3</h2>
        <b>conteúdo</b>
    </div>
    <div id="blockpop" onclick="Exibir4()" ondblclick="Ocultar4()">
        <div id="textblock">BLOCO 4</div>
    </div>
    <div id="div04">
        <h2>BLOCO 4</h2>
        <b>conteúdo</b>
    </div>
    <div id="blockpop" onclick="Exibir5()" ondblclick="Ocultar5()">
        <div id="textblock">BLOCO 5</div>
    </div>
    <div id="div05">
        <h2>BLOCO 5</h2>
        <b>conteúdo</b>
    </div>

Desta forma, qual seria a forma mais prática de criar um script que ao abrir um bloco, feche todos as outros que estiverem abertos na página? É possível criar uma função dentro do atributo onclick em uma tag que reconheça apenas dois cliques para abrir e fechar um bloco qualquer?

6
  • Não sei se é apenas por questão de estudos e vc realmente quer saber como faz com JS, mas esse componente é possível de fazer apenas com CSS, se te interessar posso fazer um modelo.
    – hugocsl
    Commented 31/12/2018 às 11:05
  • Sim, ficaria grato se tivesse um exemplo prático aqui no post, pois eu já vi este método feito apenas com funções pré-definidas em JavaScript, já apenas pelo CSS, nunca ouvi falar nesta forma.
    – pe.Math
    Commented 31/12/2018 às 12:16
  • Cara eu fiz o modelo e está 100% funcional, o problema é que ele não é exatamente como vc quer, pois ele não se fecha no duplo clique, na verdade depois de aberto ele fica aberto, mas alterna fechando uma quando abre outra normalmente... Veja esse gif, se te interessar eu posto como uma opção de resposta... imgur.com/a/w9EBkAZ
    – hugocsl
    Commented 31/12/2018 às 12:53
  • Consegui fazer com jQuery abrindo e fechando da forma que vc quer, só que é com um cliquei simples para fechar e não com um clique-duplo pra fechar. Mas o resto está 100%, abre um e fecha os outros, e se clicar no que está aberto ele se fecha. Um problema que reparei no seu código é que vc está repetindo o ID em vários elementos, isso não é legal, até pq uma simples classe css seria mais adequado. Se quiser posso incluir na resposta os dois códigos imgur.com/a/3LsmG4z
    – hugocsl
    Commented 31/12/2018 às 13:16
  • @hugocsl, pode colocar sim, é até bom para alguns usuários verem e se interessarem pelo assunto, pois há alguns websites que possuem várias informações que optam por utilizar esta forma de divisão do conteúdo. Mas, se possível, pode colocar como resposta aqui no post. ;-)
    – pe.Math
    Commented 31/12/2018 às 18:20

2 Respostas 2

3

Em vez de criar várias funções para cada id, você pode usar algo mais genérico. Primeiro é preciso reformular seu HTML, eliminando as id's repetidas, trocando-as por class, e ajustar o CSS de acordo.

Em vez de usar onclick e ondblclick, utilize event handlers, que deixará seu código mais limpo e melhor, pois você pode incluir seu código no document.addEventListener("DOMContentLoaded", function(){ evitando variáveis globais.

Também é interessante inserir no CSS a propriedade user-select: none; para que a div não seja selecionada no clique duplo.

Veja como ficaria (comentários explicativos no código):

document.addEventListener("DOMContentLoaded", function(){

   // seleciona todos os elementos com a classe .blockpop
   var els = document.querySelectorAll(".blockpop");   
   for(var x=0; x<els.length; x++){
      
      // event handler do clique
      els[x].onclick = function(){

         // seleciona todos os blocos onde a "id" começa com "div"
         var blocos = document.querySelectorAll("div[id^=div]");
         
         // esconde todos os blocos
         for(var y=0; y<blocos.length; y++) blocos[y].style.display = "none";
         
         // mostra o elemento seguinte ao bloco clicado
         this.nextElementSibling.style.display = "block";

      }

      // event handler do clique duplo
      els[x].ondblclick = function(){
         // esconde o elemento seguinte ao bloco clicado
         this.nextElementSibling.style.display = "none";
      }
   }
   
});
.blockpop{
  background-color: lightgray;
  width: 4%;
  height: 300px;
  float: left;
  border: 1px solid;
  padding-top: 9%;
  padding-left: 1.9%;

   /* evita a selecionar no clique duplo */
   -webkit-user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
h2{
  width: 50%;
}
.textblock{
  transform: rotate(-90deg);
  width: 700%;
  margin-left: -350%;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
}
#div01{background-color: red;}
#div02{background-color: gold;}
#div03{background-color: lightgreen;}
#div04{background-color: royalblue;}
#div05{background-color: pink;}
#div01,#div02,#div03,#div04,#div05{
  width: 80%;
  float: left;
  display: none;
  padding-left: 1%;
  height: 300px;
  overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="blockpop">
   <div class="textblock">BLOCO 1</div>
</div>
<div id="div01">
   <h2>BLOCO 1</h2>
   <b>conteúdo</b><br>
</div>
<div class="blockpop">
   <div class="textblock">BLOCO 2</div>
</div>
<div id="div02">
   <h2>BLOCO 2</h2>
   <b>conteúdo</b>
</div>
<div class="blockpop">
   <div class="textblock">BLOCO 3</div>
</div>
<div id="div03">
   <h2>BLOCO 3</h2>
   <b>conteúdo</b>
</div>
<div class="blockpop">
   <div class="textblock">BLOCO 4</div>
</div>
<div id="div04">
   <h2>BLOCO 4</h2>
   <b>conteúdo</b>
</div>
<div class="blockpop">
   <div class="textblock">BLOCO 5</div>
</div>
<div id="div05">
   <h2>BLOCO 5</h2>
   <b>conteúdo</b>
</div>

Com jQuery

Se quiser usar jQuery, basta substituir o JavaScript por este:

$(function(){

   $(".blockpop").on("click dblclick", function(e){

      if(e.type == "click"){
         $("div[id^=div]").hide();
         $(this).next().show();
      }else{
         $(this).next().hide();
      }

   });

});

Com animação jQuery

Se quiser animar, ajuste o CSS colocando as divs com width: 0 e padding-left: 0 e retire o display: none:

$(function(){

   $(".blockpop").on("click dblclick", function(e){
      
      $this = $(this);
      $next = $this.next();
      
      if(e.type == "click"){
      
         $("div[id^=div]").not($next).css({
            width: 0,
            paddingLeft: 0
         });

         if($next.width() == 0){
            $next.animate({
               width: "80%",
               paddingLeft: "1%"
            });
         }

      }else{

         $next.animate({
            width: 0,
            paddingLeft: 0
         });

      }

   });

});
.blockpop{
  background-color: lightgray;
  width: 4%;
  height: 300px;
  float: left;
  border: 1px solid;
  padding-top: 9%;
  padding-left: 1.9%;

   /* evita a selecionar no clique duplo */
   -webkit-user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
h2{
  width: 50%;
}
.textblock{
  transform: rotate(-90deg);
  width: 700%;
  margin-left: -350%;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
}
#div01{background-color: red;}
#div02{background-color: gold;}
#div03{background-color: lightgreen;}
#div04{background-color: royalblue;}
#div05{background-color: pink;}
#div01,#div02,#div03,#div04,#div05{
  width: 0;
  float: left;
  padding-left: 0;
  height: 300px;
  overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="blockpop">
   <div class="textblock">BLOCO 1</div>
</div>
<div id="div01">
   <h2>BLOCO 1</h2>
   <b>conteúdo</b><br>
</div>
<div class="blockpop">
   <div class="textblock">BLOCO 2</div>
</div>
<div id="div02">
   <h2>BLOCO 2</h2>
   <b>conteúdo</b>
</div>
<div class="blockpop">
   <div class="textblock">BLOCO 3</div>
</div>
<div id="div03">
   <h2>BLOCO 3</h2>
   <b>conteúdo</b>
</div>
<div class="blockpop">
   <div class="textblock">BLOCO 4</div>
</div>
<div id="div04">
   <h2>BLOCO 4</h2>
   <b>conteúdo</b>
</div>
<div class="blockpop">
   <div class="textblock">BLOCO 5</div>
</div>
<div id="div05">
   <h2>BLOCO 5</h2>
   <b>conteúdo</b>
</div>

2

Estou colocando essa resposta apenas como ajuda complementar solicitada pelo autor da pergunta nos comentários da pergunta.

Opção 1

Com label + input type radio

inserir a descrição da imagem aqui

Apenas com CSS vc pode usar uma regra CSS e substituis a div blockpop por uma label, e usar essa label para ativar um radio.button que dependo do estado :checkede vai mostrar um conteúdo e esconder os outros.

OBS: A desvantagem desse modelo é que uma vez que vc clicou em algum btn vc não consegue fecha-lo, ele só se fecha se vc abrir outro btn...

.blockpop{
  background-color: lightgray;
  width: 4%;
  height: 300px;
  float: left;
  border: 1px solid;
  padding-top: 9%;
  padding-left: 1.9%;
  box-sizing: border-box;
}
h2{
  width: 50%;
}
.textblock{
  transform: rotate(-90deg);
  width: 700%;
  margin-left: -350%;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
}
.div01{background-color: red;}
.div02{background-color: gold;}
.div03{background-color: lightgreen;}
.div04{background-color: royalblue;}
.div05{background-color: pink;}
.div01,.div02,.div03,.div04,.div05{
  width: 0%;
  float: left;
  /* display: none; */
  padding-left: 0%;
  height: 300px;
  overflow-x: auto;
  box-sizing: border-box;
  transition: all 1s linear;
}
[type="radio"]:checked + div,
[type="radio"]:checked + div,
[type="radio"]:checked + div,
[type="radio"]:checked + div,
[type="radio"]:checked + div{
  width: 80%;
  padding-left: 1%;
}
[type="radio"] {
  display: none;
}
<label for="btn1" class="blockpop" >
  <div class="textblock">BLOCO 1</div>
</label>
<input type="radio" name="btns" id="btn1">
<div class="div01">
  <h2>BLOCO 1</h2>
  <b>conteúdo</b><br>
</div>
<label for="btn2" class="blockpop" >
  <div class="textblock">BLOCO 2</div>
</label>
<input type="radio" name="btns" id="btn2">
<div class="div02">
  <h2>BLOCO 2</h2>
  <b>conteúdo</b>
</div>
<label for="btn3" class="blockpop" >
  <div class="textblock">BLOCO 3</div>
</label>
<input type="radio" name="btns" id="btn3">
<div class="div03">
  <h2>BLOCO 3</h2>
  <b>conteúdo</b>
</div>
<label for="btn4" class="blockpop" >
  <div class="textblock">BLOCO 4</div>
</label>
<input type="radio" name="btns" id="btn4">
<div class="div04">
  <h2>BLOCO 4</h2>
  <b>conteúdo</b>
</div>
<label for="btn5" class="blockpop" >
  <div class="textblock">BLOCO 5</div>
</label>
<input type="radio" name="btns" id="btn5">
<div class="div05">
  <h2>BLOCO 5</h2>
  <b>conteúdo</b>
</div>


Opção 2

Com jQuery

Vc pode usar uma classe .ativo fazendo um toggleClass para determinar o item que foi clicado e abri-lo ao mesmo tempo que usando o método .siblings() vc remove a classe dos irmãos.

inserir a descrição da imagem aqui

Veja o código referente a imagem acima:

$(".blockpop").click(function(event){
   $(this).toggleClass("ativo").siblings().removeClass("ativo");
});
.blockpop{
  background-color: lightgray;
  width: 4%;
  height: 300px;
  float: left;
  border: 1px solid;
  padding-top: 9%;
  padding-left: 1.9%;
  box-sizing: border-box;
}
h2{
  width: 50%;
}
.textblock{
  transform: rotate(-90deg);
  width: 700%;
  margin-left: -350%;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
}
.div01{background-color: red;}
.div02{background-color: gold;}
.div03{background-color: lightgreen;}
.div04{background-color: royalblue;}
.div05{background-color: pink;}

.div01,
.div02,
.div03,
.div04,
.div05{
  width: 0%;
  float: left;
  padding-left: 0%;
  height: 300px;
  overflow-x: auto;
  box-sizing: border-box;
  transition: all 1s linear;
}
.blockpop.ativo + div{
  width: 80%;
  padding-left: 1%;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="blockpop" >
  <div class="textblock">BLOCO 1</div>
</div>
<div class="div01">
  <h2>BLOCO 1</h2>
  <b>conteúdo</b><br>
</div>
<div class="blockpop" >
  <div class="textblock">BLOCO 2</div>
</div>
<div class="div02">
  <h2>BLOCO 2</h2>
  <b>conteúdo</b>
</div>
<div class="blockpop" >
  <div class="textblock">BLOCO 3</div>
</div>
<div class="div03">
  <h2>BLOCO 3</h2>
  <b>conteúdo</b>
</div>
<div class="blockpop" >
  <div class="textblock">BLOCO 4</div>
</div>
<div class="div04">
  <h2>BLOCO 4</h2>
  <b>conteúdo</b>
</div>
<div class="blockpop" >
  <div class="textblock">BLOCO 5</div>
</div>
<div class="div05">
  <h2>BLOCO 5</h2>
  <b>conteúdo</b>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .