Estoy tratando de crear una lista de ".años". Cuando hago clic en el primer año (es decir, 2009), debería mostrar solo el Contenido que está dentro de ese año (en este caso, "Contenido1"). Y cuando hago clic en otro elemento de la lista .years, "Content1" debería ocultarse.
$(".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>Su HTML es bastante inválido, no debe poner div dentro de ul y fuera de li . Solo li es hijo directo válido de ul .
Ponga div dentro de li y debería estar bien porque entonces será hijo de su elemento "años".
Tiene un marcado no válido = el <ul> solo debe contener <li> . Mueva la etiqueta final/final para cerrarla y podrá alternar los elementos secundarios como desee.
$(".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>