如何使用 jQuery 通过选择器上的单击事件显示 div 数据

Question

I am new to jQuery and confused about simple logic and need your help to sort the mess. I am using HTML, CSS, jQuery to display some data by on click the jQuery event on selector '.class'. I have successfully opened the data for the first time for a single div panel. But if I used the same HTML twice then both of the panels display data at the same. Below is the code

 jQuery(document).ready(function() { jQuery(".flip").click(function () { jQuery(this).siblings(".panel").slideToggle("slow"); }); });

 .panel, .flip { padding: 30px; text-align: center; background-color: transparent; font-weight: bold; font-size: 28px; }.panel { padding: 50px; display: none; }.flip{ cursor:pointer; }.cards-header.flip { background-color: #001c47; color: #fff; margin-bottom: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <,-- navigation end --> <div class="heading-wrapper"> <h1>Ingredient of the Month</h1> </div> <div class="wrapper"> <div class="cards-header flip"> Year - 2022 </div> <div class="panel ingredients-wrapper"> <div class="container"> <div class="row"> <div class="col-6"> <div class="ingredient-img-wrapper"> <div class="ingredient-month-wrapper"> </div> </div> </div> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="#" title="Shea Butter" target="_blank"><img class="img-fluid" src="" alt="Shea Butter" /></a> <div class="ingredient-month-wrapper"> <h2>January'22: Shea Butter</h2> </div> </div> </div> </div> </div> </div> <div class="cards-header flip"> Year - 2021 </div> <div class="panel ingredients-wrapper"> <div class="container"> <div class="row"> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="https.//example.com/highlights/ingredient-of-the-month/carrot-seed-oil.html" title="Carrot Seed Oil" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-carrot-seed-oil,jpg" alt="Carrot Seed Oil" /></a> <div class="ingredient-month-wrapper"> <h2>December'21. Carrot Seed Oil</h2> </div> </div> </div> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/olive-oil.html" title="Olive Oil" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-olive-oil,jpg" alt="Olive Oil" /></a> <div class="ingredient-month-wrapper"> <h2>November'21. Olive Oil</h2> </div> </div> </div> </div> <div class="row"> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/lemon.html" title="Lemon" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-lemon,jpg" alt="Lemon" /></a> <div class="ingredient-month-wrapper"> <h2>October'21. Lemon</h2> </div> </div> </div> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/lycopene.html" title="Lycopene" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-lycopene,jpg" alt="Lycopene" /></a> <div class="ingredient-month-wrapper"> <h2>September'21. Lycopene</h2> </div> </div> </div> </div> <div class="row"> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/peach.html" title="Peach" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-peach,jpg" alt="Peach" /></a> <div class="ingredient-month-wrapper"> <h2>August'21. Peach</h2> </div> </div> </div> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/cucumber.html" title="Cucumber" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-cucumber,jpg" alt="Cucumber" /></a> <div class="ingredient-month-wrapper"> <h2>July'21. Cucumber</h2> </div> </div> </div> </div> <div class="row"> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/avocado.html" title="Avocado" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-avocado,jpg" alt="Avocado" /></a> <div class="ingredient-month-wrapper"> <h2>June'21. Avocado</h2> </div> </div> </div> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/watermelon.html" title="Watermelon" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-watermelon,jpg" alt="Watermelon" /></a> <div class="ingredient-month-wrapper"> <h2>May'21. Watermelon</h2> </div> </div> </div> </div> <div class="row"> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img class="img-fluid" src="./assets/img/Carousel-cofee,jpg" alt="Coffee" /></a> <div class="ingredient-month-wrapper"> <h2>April'21. Coffee</h2> </div> </div> </div> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/kakaduplum-completed.html" title="Kakadu Plum" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-kakaduplum,jpg" alt="Kakadu Plum" /></a> <div class="ingredient-month-wrapper"> <h2>March'21, Kakadu Plum</h2> </div> </div> </div> </div> </div> </div> </div>

So I want to open one by one ie when someone clicks on the year 2021 then it will open its data and if someone clicks on 2022 then that year div data open. How to achieve the same?

Answer 1

Use next instead of siblings

JQuery(document).ready(function() {
    JQuery(".flip").click(function () {                  
        JQuery(this).next(".panel").slideToggle("slow");
    });
});

Working codepen. https://codepen.io/rvtech/pen/zYEWxqR

Answer 2

 jQuery(document).ready(function() { jQuery(".flip").click(function () { jQuery(this).next(".panel").slideToggle("slow"); }); });

 .panel, .flip { padding: 30px; text-align: center; background-color: transparent; font-weight: bold; font-size: 28px; }.panel { padding: 50px; display: none; }.flip{ cursor:pointer; }.cards-header.flip { background-color: #001c47; color: #fff; margin-bottom: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <,-- navigation end --> <div class="heading-wrapper"> <h1>Ingredient of the Month</h1> </div> <div class="wrapper"> <div class="cards-header flip"> Year - 2022 </div> <div class="panel ingredients-wrapper"> <div class="container"> <div class="row"> <div class="col-6"> <div class="ingredient-img-wrapper"> <div class="ingredient-month-wrapper"> </div> </div> </div> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="#" title="Shea Butter" target="_blank"><img class="img-fluid" src="" alt="Shea Butter" /></a> <div class="ingredient-month-wrapper"> <h2>January'22: Shea Butter</h2> </div> </div> </div> </div> </div> </div> <div class="cards-header flip"> Year - 2021 </div> <div class="panel ingredients-wrapper"> <div class="container"> <div class="row"> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="https.//example.com/highlights/ingredient-of-the-month/carrot-seed-oil.html" title="Carrot Seed Oil" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-carrot-seed-oil,jpg" alt="Carrot Seed Oil" /></a> <div class="ingredient-month-wrapper"> <h2>December'21. Carrot Seed Oil</h2> </div> </div> </div> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/olive-oil.html" title="Olive Oil" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-olive-oil,jpg" alt="Olive Oil" /></a> <div class="ingredient-month-wrapper"> <h2>November'21. Olive Oil</h2> </div> </div> </div> </div> <div class="row"> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/lemon.html" title="Lemon" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-lemon,jpg" alt="Lemon" /></a> <div class="ingredient-month-wrapper"> <h2>October'21. Lemon</h2> </div> </div> </div> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/lycopene.html" title="Lycopene" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-lycopene,jpg" alt="Lycopene" /></a> <div class="ingredient-month-wrapper"> <h2>September'21. Lycopene</h2> </div> </div> </div> </div> <div class="row"> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/peach.html" title="Peach" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-peach,jpg" alt="Peach" /></a> <div class="ingredient-month-wrapper"> <h2>August'21. Peach</h2> </div> </div> </div> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/cucumber.html" title="Cucumber" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-cucumber,jpg" alt="Cucumber" /></a> <div class="ingredient-month-wrapper"> <h2>July'21. Cucumber</h2> </div> </div> </div> </div> <div class="row"> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/avocado.html" title="Avocado" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-avocado,jpg" alt="Avocado" /></a> <div class="ingredient-month-wrapper"> <h2>June'21. Avocado</h2> </div> </div> </div> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/watermelon.html" title="Watermelon" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-watermelon,jpg" alt="Watermelon" /></a> <div class="ingredient-month-wrapper"> <h2>May'21. Watermelon</h2> </div> </div> </div> </div> <div class="row"> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img class="img-fluid" src="./assets/img/Carousel-cofee,jpg" alt="Coffee" /></a> <div class="ingredient-month-wrapper"> <h2>April'21. Coffee</h2> </div> </div> </div> <div class="col-6"> <div class="ingredient-img-wrapper"> <a href="ingredient-of-the-month/kakaduplum-completed.html" title="Kakadu Plum" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-kakaduplum,jpg" alt="Kakadu Plum" /></a> <div class="ingredient-month-wrapper"> <h2>March'21, Kakadu Plum</h2> </div> </div> </div> </div> </div> </div> </div>

Answer 3

 $(".flip").click(function(e) { $(this).next().slideToggle() })

https://codepen.io/hardik9193/pen/yLzKNEZ