JQuery - Tooggle Panels

Question

JQuery - Tooggle Panels

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

I need help with Jquery below ... I need every% of% of each% of% to show <div id="flip"></div> .

However, the way it is, it only works with the first div content ... on the second when you click nothing happens .. can anyone 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

asked by anonymous 01.10.2018 / 16:35

2 answers

0

For the demand, it will be necessary to use class markup since ID is unique.

I hope I have 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>

01.10.2018 / 17:14

PHP - Create cookie with multiple values get private user id from a session

score 3 · Accepted Answer

ids are unique identifiers. You are using the same for both divs. Try putting class as divs, so it will work. Or follow what I did below, it works.

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