I'm trying to create a list of ".years". When I click on the first year (es.2009) it should show only the Content that it's inside that year (in this case "Content1"). And when I click on another element of the list .years, "Content1" should hide.
$(".years").click(function(e) {
e.preventDefault();
console.log($(this).children());
//console.log($(this).find("h5"));
//.find($(".award"))
//$('.award').toggleClass('active'); //this is what I want to do
});.award {
display: none;
}
.award.active {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="years">2004</li>
<div class="award">
<h5>Content1</h5>
</div>
<li class="years">2009</li>
<div class="award">
<h5>Content2</h5>
</div>
<div class="award">
<h5>Content3</h5>
</div>
</ul>Your HTML is pretty much invalid, you should not put div inside ul and outside li. Onl li is valid direct child of ul.
Put div inside li and you should be fine because then it will be child of your "years" element.
You have invalid markup = the <ul> should only contain <li>. Move the trailing/end tag close and the you can toggle the child elements as you desire.
$(".years").on('click', function(e) {
e.preventDefault();
console.log($(this).children('.award').length);
$(this).find('.award').toggleClass('active');
});.award {
display: none;
}
.award.active {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="years">2004
<div class="award">
<h5>Content1</h5>
</div>
</li>
<li class="years">2009
<div class="award">
<h5>Content2</h5>
</div>
<div class="award">
<h5>Content3</h5>
</div>
</li>
</ul>