$(this).children() not functioning-CodePudding

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.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(".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
    
});
</script>

.award{
  display:none;
}
.award.active{
  display: block;
}

<ul> 
  <li >2004</li>
     <div >
        <h5>Content1</h5>
     </div>
  <li >2009</li>
      <div >
        <h5>Content2</h5>
      </div>
      <div  >
        <h5>Content3</h5>
      </div>
</ul>

CodePudding user response：

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.

CodePudding user response：

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 >2004
    <div >
      <h5>Content1</h5>
    </div>
  </li>
  <li >2009
    <div >
      <h5>Content2</h5>
    </div>
    <div >
      <h5>Content3</h5>
    </div>
  </li>
</ul>