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 >
<h1>Ingredient of the Month</h1>
</div>
<div >
<div >
Year - 2022
</div>
<div >
<div >
<div >
<div >
<div >
<div >
</div>
</div>
</div>
<div >
<div >
<a href="#" title="Shea Butter" target="_blank"><img src="" alt="Shea Butter" /></a>
<div >
<h2>January'22, Shea Butter</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div >
Year - 2021
</div>
<div >
<div >
<div >
<div >
<div >
<a href="https://example.com/highlights/ingredient-of-the-month/carrot-seed-oil.html" title="Carrot Seed Oil" target="_blank"><img src="./assets/img/Carousel-carrot-seed-oil.jpg" alt="Carrot Seed Oil" /></a>
<div >
<h2>December'21, Carrot Seed Oil</h2>
</div>
</div>
</div>
<div >
<div >
<a href="ingredient-of-the-month/olive-oil.html" title="Olive Oil" target="_blank"><img src="./assets/img/Carousel-olive-oil.jpg" alt="Olive Oil" /></a>
<div >
<h2>November'21, Olive Oil</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<a href="ingredient-of-the-month/lemon.html" title="Lemon" target="_blank"><img src="./assets/img/Carousel-lemon.jpg" alt="Lemon" /></a>
<div >
<h2>October'21, Lemon</h2>
</div>
</div>
</div>
<div >
<div >
<a href="ingredient-of-the-month/lycopene.html" title="Lycopene" target="_blank"><img src="./assets/img/Carousel-lycopene.jpg" alt="Lycopene" /></a>
<div >
<h2>September'21, Lycopene</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<a href="ingredient-of-the-month/peach.html" title="Peach" target="_blank"><img src="./assets/img/Carousel-peach.jpg" alt="Peach" /></a>
<div >
<h2>August'21, Peach</h2>
</div>
</div>
</div>
<div >
<div >
<a href="ingredient-of-the-month/cucumber.html" title="Cucumber" target="_blank"><img src="./assets/img/Carousel-cucumber.jpg" alt="Cucumber" /></a>
<div >
<h2>July'21, Cucumber</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<a href="ingredient-of-the-month/avocado.html" title="Avocado" target="_blank"><img src="./assets/img/Carousel-avocado.jpg" alt="Avocado" /></a>
<div >
<h2>June'21, Avocado</h2>
</div>
</div>
</div>
<div >
<div >
<a href="ingredient-of-the-month/watermelon.html" title="Watermelon" target="_blank"><img src="./assets/img/Carousel-watermelon.jpg" alt="Watermelon" /></a>
<div >
<h2>May'21, Watermelon</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img src="./assets/img/Carousel-cofee.jpg" alt="Coffee" /></a>
<div >
<h2>April'21, Coffee</h2>
</div>
</div>
</div>
<div >
<div >
<a href="ingredient-of-the-month/kakaduplum-completed.html" title="Kakadu Plum" target="_blank"><img src="./assets/img/Carousel-kakaduplum.jpg" alt="Kakadu Plum" /></a>
<div >
<h2>March'21, Kakadu Plum</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>So I want to open one by one i.e. 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?
CodePudding user response：
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 >
<h1>Ingredient of the Month</h1>
</div>
<div >
<div >
Year - 2022
</div>
<div >
<div >
<div >
<div >
<div >
<div >
</div>
</div>
</div>
<div >
<div >
<a href="#" title="Shea Butter" target="_blank"><img src="" alt="Shea Butter" /></a>
<div >
<h2>January'22, Shea Butter</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div >
Year - 2021
</div>
<div >
<div >
<div >
<div >
<div >
<a href="https://example.com/highlights/ingredient-of-the-month/carrot-seed-oil.html" title="Carrot Seed Oil" target="_blank"><img src="./assets/img/Carousel-carrot-seed-oil.jpg" alt="Carrot Seed Oil" /></a>
<div >
<h2>December'21, Carrot Seed Oil</h2>
</div>
</div>
</div>
<div >
<div >
<a href="ingredient-of-the-month/olive-oil.html" title="Olive Oil" target="_blank"><img src="./assets/img/Carousel-olive-oil.jpg" alt="Olive Oil" /></a>
<div >
<h2>November'21, Olive Oil</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<a href="ingredient-of-the-month/lemon.html" title="Lemon" target="_blank"><img src="./assets/img/Carousel-lemon.jpg" alt="Lemon" /></a>
<div >
<h2>October'21, Lemon</h2>
</div>
</div>
</div>
<div >
<div >
<a href="ingredient-of-the-month/lycopene.html" title="Lycopene" target="_blank"><img src="./assets/img/Carousel-lycopene.jpg" alt="Lycopene" /></a>
<div >
<h2>September'21, Lycopene</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<a href="ingredient-of-the-month/peach.html" title="Peach" target="_blank"><img src="./assets/img/Carousel-peach.jpg" alt="Peach" /></a>
<div >
<h2>August'21, Peach</h2>
</div>
</div>
</div>
<div >
<div >
<a href="ingredient-of-the-month/cucumber.html" title="Cucumber" target="_blank"><img src="./assets/img/Carousel-cucumber.jpg" alt="Cucumber" /></a>
<div >
<h2>July'21, Cucumber</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<a href="ingredient-of-the-month/avocado.html" title="Avocado" target="_blank"><img src="./assets/img/Carousel-avocado.jpg" alt="Avocado" /></a>
<div >
<h2>June'21, Avocado</h2>
</div>
</div>
</div>
<div >
<div >
<a href="ingredient-of-the-month/watermelon.html" title="Watermelon" target="_blank"><img src="./assets/img/Carousel-watermelon.jpg" alt="Watermelon" /></a>
<div >
<h2>May'21, Watermelon</h2>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img src="./assets/img/Carousel-cofee.jpg" alt="Coffee" /></a>
<div >
<h2>April'21, Coffee</h2>
</div>
</div>
</div>
<div >
<div >
<a href="ingredient-of-the-month/kakaduplum-completed.html" title="Kakadu Plum" target="_blank"><img src="./assets/img/Carousel-kakaduplum.jpg" alt="Kakadu Plum" /></a>
<div >
<h2>March'21, Kakadu Plum</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>CodePudding user response：
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