$(this).children() not functioning

Question

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>

Answer 1

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>