0

Preciso de ajuda com o Jquery abaixo... preciso que cada <div id="flip"></div> dento de cada <div id="conteudo"></div> mostre a <div id="panel">Hello world!</div>.

Porém, do jeito que está, só funciona com a primeira div conteudo... na segunda quando clica não acontece nada.. alguém pode me ajudar?

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

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

#panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body>

<div id="conteudo">
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</div>

<div id="conteudo">
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</div>


</body>
</html>

2 Respostas 2

3

ids são identificadores únicos. Você está utilizando o mesmo para as duas divs. Tente colocar como class as divs, assim funcionará.
Ou siga oque fiz abaixo tbm funciona.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $(".flip").click(function(){
        var id = $(this).attr('id')
        $(".painel"+id).slideToggle("slow");
    });
});
</script>

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

.panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body>

<div class="conteudo">
<div class="flip" id="1">Click to slide the panel down or up</div>
<div class="panel painel1">Hello world!</div>
</div>

<div class="conteudo">
<div class="flip" id="2">Click to slide the panel down or up</div>
<div class="panel painel2">Hello world!</div>
</div>


</body>
</html>

1
  • Obrigado!! Consegui usando a classe!! Commented 1/10/2018 às 15:16
0

para a demanda, será necessário usar a marcação de class já que ID é único.

Espero ter ajudado.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){

    $(".conteudo").click(function(){
        $(this).find(".panel").slideToggle("slow");
        });
    });
</script>

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

.panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body>

<div class="conteudo">
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
</div>

<div class="conteudo">
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
</div>


</body>
</html>

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 .