Ir para conteúdo
  • 0

[Resolvido] Duvida simples

zKingOfKill

Perguntado por zKingOfKill,

 Compartilhar

Pergunta

zKingOfKill

zKingOfKill

Postado
Postado

Olá tudo bom?

 

Pessoal to com uma duvida aqui, tipo to com dois paineis aqui e dois botoes, quando a pagina carrega o panel2 fica oculto,( como esperado) ao clicar no botao do painel2 o painel um some, e assim por diante, isso ta funcionando tranquilo

 

porem quando clica no botao do painel, se ele já tiver aberto, ele vai sumir, o mesmo acontece com o botao do painel2 (caso ele ja esteja aberto

Entao gostaria que se tiver aberto, nao aconteça nada, e tambem mude o cursor para "not-allowed" no respectivo botao... poderiam me ajudar?

 

code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
	    $("#panel").slideToggle("slow");
		$("#panel2").hide("panel");
    });
	    $("#flip2").click(function(){
        $("#panel2").slideToggle("slow");
		$("#panel").hide("panel");
    });
});
</script>

<style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
#panel2, #flip2 {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;

}

#flip{
	cursor: pointer;

}
#flip2{
	cursor: pointer;

}

#panel2 {
    padding: 50px;
    display: none;
}

#panel{
    padding: 50px;
}

</style>
</head>
<body>
 
<button id="flip">Clique 1</button>
<button id="flip2">Clique 2</button>
<div id="panel">Aqui vai aparecer algumas coisas (panel)</div>
<div id="panel2">Aqui vai aparecer algumas coisas (panel2)</div>
</body>
</html>
Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

SnowRunescape

SnowRunescape

Postado
Postado

Ai... espero ter ajudado

 

 

 

<!DOCTYPE html>
<html>
<head>
<script> 
$(document).ready(function(){
var sw = 1;
var sw2 = 0;
    $("#flip").click(function(){
if(sw == 0){
sw = 1;
sw2 = 0;
$("#panel").slideToggle("slow");
$("#panel2").hide("panel");
}
    });
   $("#flip2").click(function(){
if(sw2 == 0){
sw = 0;
sw2 = 1;
$("#panel2").slideToggle("slow");
$("#panel").hide("panel");
}
    });
});
</script>
<style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
#panel2, #flip2 {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
 
}
 
#flip{
cursor: pointer;
 
}
#flip2{
cursor: pointer;
 
}
 
#panel2 {
    padding: 50px;
    display: none;
}
 
#panel{
    padding: 50px;
}
 
</style>
</head>
<div>
<button id="flip">Clique 1</button>
<button id="flip2">Clique 2</button>
<div id="panel">Aqui vai aparecer algumas coisas (panel)</div>
<div id="panel2">Aqui vai aparecer algumas coisas (panel2)</div>
 

 

 

1
Link para o comentário
Compartilhar em outros sites
zKingOfKill

zKingOfKill

Postado
  • Autor
Postado

Ai... espero ter ajudado

 

 

 

<!DOCTYPE html>
<html>
<head>
<script> 
$(document).ready(function(){
var sw = 1;
var sw2 = 0;
    $("#flip").click(function(){
if(sw == 0){
sw = 1;
sw2 = 0;
$("#panel").slideToggle("slow");
$("#panel2").hide("panel");
}
    });
   $("#flip2").click(function(){
if(sw2 == 0){
sw = 0;
sw2 = 1;
$("#panel2").slideToggle("slow");
$("#panel").hide("panel");
}
    });
});
</script>
<style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
#panel2, #flip2 {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
 
}
 
#flip{
cursor: pointer;
 
}
#flip2{
cursor: pointer;
 
}
 
#panel2 {
    padding: 50px;
    display: none;
}
 
#panel{
    padding: 50px;
}
 
</style>
</head>
<div>
<button id="flip">Clique 1</button>
<button id="flip2">Clique 2</button>
<div id="panel">Aqui vai aparecer algumas coisas (panel)</div>
<div id="panel2">Aqui vai aparecer algumas coisas (panel2)</div>
 

 

 

Não ta funcionando, tipo os dois botoes ficam travados

Link para o comentário
Compartilhar em outros sites
SnowRunescape

SnowRunescape

Postado
Postado 



<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script> 

$(document).ready(function(){

var sw = 1;

var sw2 = 0;

    $("#flip").click(function(){

if(sw == 0){

sw = 1;

sw2 = 0;

$("#panel").slideToggle("slow");

$("#panel2").hide("panel");

}

    });

   $("#flip2").click(function(){

if(sw2 == 0){

sw = 0;

sw2 = 1;

$("#panel2").slideToggle("slow");

$("#panel").hide("panel");

}

    });

});

</script>

<style> 

#panel, #flip {

    padding: 5px;

    text-align: center;

    background-color: #e5eecc;

    border: solid 1px #c3c3c3;

}

#panel2, #flip2 {

    padding: 5px;

    text-align: center;

    background-color: #e5eecc;

    border: solid 1px #c3c3c3;

 

}

 

#flip{

cursor: pointer;

 

}

#flip2{

cursor: pointer;

 

}

 

#panel2 {

    padding: 50px;

    display: none;

}

 

#panel{

    padding: 50px;

}

 

</style>

</head>

<div>

<button id="flip">Clique 1</button>

<button id="flip2">Clique 2</button>

<div id="panel">Aqui vai aparecer algumas coisas (panel)</div>

<div id="panel2">Aqui vai aparecer algumas coisas (panel2)</div>

Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novos posts.
 Compartilhar
Ir para lista de perguntas

  • Quem está navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...