Jquery - Tooggle Panels

Asked

Viewed 29 times

0

I need help with Jquery below... I need each <div id="flip"></div> inside each <div id="conteudo"></div> show the <div id="panel">Hello world!</div>.

However, the way it is, it only works with the first div content... the second when you click nothing happens. someone can help me?

<!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>

html jquery

2 answers

3


ids are unique identifiers. You are using the same for both Ivs. Try to put as class the Ivs, this will work.
Or follow what I’ve done below.

<!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>

  • Thanks!! I managed using the class!!

0

for the demand, it will be necessary to use the class marking since ID is unique.

I hope I’ve helped.

<!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>

Browser other questions tagged html jquery

You are not signed in. Login or sign up in order to post.