Jump to content
geoleandro

Abrir Divs em sequência

Recommended Posts


<!DOCTYPE html>
<html>
<head>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>

<div id="dq1"style="display:block"> <br><br>
Conteúdo da Div 1
</div>


<br><br>
<span id = "bdq2"  style="display:block" onclick = "divMostrar(2)">Próximo</span><br><br>

<div id="dq2"style="display:none"> 
Conteúdo da Div 2
</div>


<br><br>
<span id = "bdq3"  style="display:none"   onclick = "divMostrar(3)">Próximo</span><br><br>

<div id="dq3"style="display:none"> 
Conteúdo da Div 3
</div>


<br><br>
<span id = "bdq4"  style="display:none"   onclick = "divMostrar(4)">Próximo</span><br><br>

<div id="dq4"style="display:none"> <br><br>
Conteúdo da Div 4
</div>


<br><br>
<span id = "bdq5"  style="display:none"   onclick = "divMostrar(5)">Próximo</span><br><br>

<div id="dq5"style="display:none"> <br><br>
Conteúdo da Div 5
</div>
<br><br>


<span id = "bdq6"  style="display:none"   onclick = "divMostrar(6)">Próximo</span>

<div id="dq6"style="display:none"> 
Terminou!
</div>



<script>

function divMostrar(qnum){

     		
	
	
	if (document.getElementById("bdq2").style.display='block'&& qnum==2) {
	
	document.getElementById("dq2").style.display='block';
	document.getElementById("bdq2").style.display='none';
	document.getElementById("bdq3").style.display='block';
	 }
	if (document.getElementById("bdq3").style.display='block' && qnum==3){
	
	document.getElementById("bdq3").style.display='none';
	document.getElementById("dq3").style.display='block';
	 document.getElementById("bdq4").style.display='block';
	 }
	 
	if (document.getElementById("bdq4").style.display='block' && qnum==4){
	document.getElementById("bdq4").style.display='none';
	document.getElementById("dq4").style.display='block';
	 document.getElementById("bdq5").style.display='block';
	
	}
	if (document.getElementById("bdq5").style.display='block' && qnum==5){
	
	document.getElementById("bdq5").style.display='none';
	document.getElementById("dq5").style.display='block';
	 document.getElementById("bdq6").style.display='block';
	}
	if (document.getElementById("bdq6").style.display='block' && qnum==6){
	
	document.getElementById("bdq6").style.display='none';
	document.getElementById("dq6").style.display='block';
	 
	
	}
}




</script>


</body>
</head>
</html>

De que outro modo é possível programar para abrir essas Divs em sequência? Além do uso de IFs e else em JavaScript.

Share this post


Link to post
Share on other sites
<style>
    .exemplo {
        display: none
    }
    .exemplo:nth-child(1), .exemplo.mostrar {
        display: block
    }
</style>

<div class="exemplo">
    <button onclick="MostrarProximo(this)">Mostrar Próximo</button>
    Primeiro
</div>
<div class="exemplo">
    <button onclick="MostrarProximo(this)">Mostrar Próximo</button>
    Segundo
</div>
<div class="exemplo">
    <button onclick="MostrarProximo(this)">Mostrar Próximo</button>
    Terceiro
</div>

<script>
    // "parametro" nada mais é que o botão clicado
    function MostrarProximo(parametro) {
        var oculto = parametro.parentNode; // Obter qual é o elemento pai do botão
        var proximo = oculto.nextElementSibling; // Obter qual é o elemento seguinte ao pai
        if (!proximo.classList.contains('mostrar')) { // Verificar se o seguinte já foi mostrado
            proximo.classList.add('mostrar'); // Mostrar o seguinte
        }
    }
</script>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By LucasRochaPL
      Olá a todos, estou construindo um pequeno site para a empresa que eu trabalho atualmente, porém como ainda sou iniciante estou tendo algumas dificuldades, e uma delas é que eu não consigo colocar as divs lado a lado, tentei varias coisas como usar o inline e float, mas fica tudo bem bagunçado, se vocês puderem por favor dar alguma dica ou me dizer oque estou fazendo de errado.
      <style> * {box-sizing: border-box;}   .container {   position: relative;   width: 50%;   max-width: 300px; }   .image {   display: block;   width: 100%;   height: auto; }   .overlay {   position: absolute;    bottom: 0;    background: rgb(0, 0, 0);   background: rgba(0, 0, 0, 0.5); /* Black see-through */   color: #f1f1f1;    width: 100%;   transition: .5s ease;   opacity:0;   color: white;   font-size: 20px;   padding: 20px;   text-align: center; }   .container:hover .overlay {   opacity: 1; } .container::after {   content: "";   clear: both;   display: table; } </style>   <div class="titulo">Produtos</div> <p>A Gap conta com uma grande variedade de      rádios e equipamentos, para atender melhor      a necessidade de nossos clientes, trabalhamos com rádios moveis,      portáteis e equipamentos para videomonitoramento. </p>   <div class="titulo">Portáteis</div> <div class="container">     <img src="products/images/dep450.jpg" alt="rádio motorola DEP450" class="image">     <div class="overlay">Motorola DEP450</div> </div> <div class="container">     <img src="products/images/ep450.jpg" alt="rádio motorola EP450" class="image">     <div class="overlay">Motorola EP450</div> </div> <div class="container">     <img src="products/images/dgp8050.jpg" alt="rádio motorola DGP8050" class="image">     <div class="overlay">Motorola DGP8050</div> </div>   <div class="titulo">Móveis</div>   <div class="container">     <img src="products/images/dem300.jpg" alt="rádio motorola DGM5000" class="image">     <div class="overlay">Motorola DEM300</div> </div>   <div class="titulo">Videomonitoramento</div>   <div class="container">     <img src="products/images/intelbrass3330.jpg" alt="camera " class="image">     <div class="overlay">Câmera Intelbras S3330</div> </div>   
    • By higordiasz
      Boa Tarde,
      Estou tendo problemas em conseguir colocar as div lado a lado alinhadas corretamente .. casso possam me ajudar ficaria grato.
       
      Segue meu código CSS responsável pelas div.
       
      .col-100 { width: 100%; float: left; position: relative; } .principal-text { background-color: #424242; } .ul-softwares { list-style-type: none; display: inline-block; height: 350; width: 90%; float: left; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-bancodedados { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-mobile { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-redeestruturada { list-style-type: none; display: inline-block; height: 350; width: 90%; float: right; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .principal-text ul li { margin: auto; text-align: center; } .uls-principal { text-align: center; } .li-img { padding-top: 6px; } .uls-principal div { display: inline-block; width: 180; padding-right: 20px; } Abaixo meu código HTML:
       
      <div class="col-100 principal-text"> <main class="uls-principal"> <div class="div-prog"> <ul class="ul-softwares"> <li class="li-img"><img src="./img/programacao.png"></li> <li> <h1>Softwares</h1> </li> <li> <p>Possuimos diversos Softwares para a sua empresa.</p> </li> <li></li> </ul> </div> <div class="div-bd"> <ul class="ul-bancodedados"> <li class="li-img"><img src="./img/bancodedados.png"></li> <li> <h1>Banco de Dados</h1> </li> <li> <p>Organimazanos todos seus dados e configuramos oque precisa.</p> </li> <li></li> </ul> </div> <div class="div-mobile"> <ul class="ul-mobile"> <li class="li-img"><img src="./img/mobile.png"></li> <li> <h1>Desenvol. Mobile</h1> </li> <li> <p>Fazemos o aplicativo ideal para a sua Empresa.</p> </li> <li></li> </ul> </div> <div class="div-rede"> <ul class="ul-redeestruturada"> <li class="li-img"><img src="./img/rede.png"></li> <li> <h1>Estrutura de Rede</h1> </li> <li> <p>Fazemos toda o mapiamento da rede e implantação.</p> </li> <li></li> </ul> </div> </main> </div> Print das DIV: 
       

       
      Alguem sabe oq posso alterar para alinhar elas corretamente ? 
    • By 4Unknow
      Bom dia meus Nobres amigos.
      Seguinte, não sou especialista em HTML, CSS, nem nada.
      Por isso venho humidelmente pedir uma ajudinha. Gostaria de colocar um botão nessa área marcada na imagem abaixo.

      Estou editando essa página abaixo:



      Já tentei de tudo, mexer por tudo, mas o botão não fica certo de jeito maneira.
      Gostaria de uma ajudinha, o botão ou ele fica em cima do texto ou não aparece de jeito algum.

      Vou deixar um link desse site que estou utilizando, se tiver uma alma bondosa e comtempo ai para me ajudar, eu serei eternamente grato.

      LINK: https://www.mediafire.com/file/fe669isyguey0ez/Intro_Viva.rar/file
    • By AlphaPingo
      Olá, sou programador iniciante e tenho uma dúvida que, imagino eu, ser simples, porém não estou conseguindo achar uma solução. Seguinte: no site a seguir, preciso que "Avaliação dos Clientes" e o quadro que a segue, fiquem logo em seguida da imagem do celular (sem aquele espaço em branco entre eles). A primeira "row" possui 3 divs - a com a imagem do celular, a com o nome do modelo, preço, e avaliação com as estrelas e a div com os detalhes do produto - porém, a ultima div, ocupa o dobro do espaço vertical das demais, sendo assim, aumentando o espaço da "row" e deslocando o quadro das avaliações mais para baixo. Eu já tentei colocar a div das avaliações dentro do "row" com as 3 outras divs, porém o que acontece é apenas aumentar o tamanho da "row" de cima, mas continuar o espaço em branco que quero preencher. O que posso fazer? (peço desculpas por qualquer erro em termos técnicos). Segue abaixo as imagens de como esta / como deveria estar e as divisões das divs


    • By kaique nunes
      O div está desalinhado, não entendo o motivo. Há espaço suficiente pra ele encaixar, não há margin impedindo-o, seja dele proprio ou de outros divs. E estes 3 estão configurados com display: inline-block;
      Estou deixando o código aqui, porém é preciso abrir a tela em pelo menos 1200px para ve-lo desta maneira:
      https://jsfiddle.net/pjygtm2o/ 

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.