JSFiddle - React, Tailwind, and code Playground
HTML
<div id="years_links">
<a href="#" id="2013">2013</a> |
<a href="#" id="2012">2012</a> |
<a href="#" id="2011">2011</a>
</div>
<div id="yearscontent">
<div id="2013">
<p class='item'>some 2013 stuff</p>
</div>
<div id="2012">
<div class='item'>some 2012 stuff</div>
</div>
<div id="2011">
<div class='item'>some 2011 stuff</div>
</div>
</div>
JavaScript
$(document).ready(function() {
var yearscontent = $('#yearscontent');
$('#yearscontent > div').hide();
$('#years_links a').click(function() {
var year = $(this).attr('id');
$('#yearscontent > div').slideUp(300);
$('#yearscontent > #'+year).slideDown(300);
});
});
// I want to be able to click on the year links and have it slideDown only the respective year div