JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<div class="yearly-archive">
    <p> YEAR -  <span class="archive-year year-active"> 2014 </span> / 
        <span class="archive-year"> 2013 </span> /
        <span class="archive-year"> 2012 </span> /
        <span class="archive-year"> 2011 </span> /
        <span class="archive-year"> 2010 </span>
    </p>
</div>

<div class="news-container news-active" id="news-2014">
    2014
</div>
<div class="news-container" id="news-2013">
    2013
</div>
<div class="news-container" id="news-2012">
    2012
</div>
<div class="news-container" id="news-2011">
    
</div>

CSS

.yearly-archive {
    font:Avenir;
    color: #550000;
    font-weight:bold;
    font-size:12px;
    float:right;
    padding: 0px 20px;
    height: 400px;
    
    position:absolute;
}

.archive-year {
    cursor: pointer;   
}

.year-active {
    color:#0000ff;   
}

.news-container {
    width: 500px;
    height: 400px;
    background-color: #563006;
    margin-top: 30px;
    display:none;
    
    position:absolute;
}

.news-active {
    display: block;   
}

#news-2013 {
    background-color: #ff0000;   
}

#news-2012 {
    background-color: #00ff00;   
}

#news-2011 {
    background-color: #0000ff;   
}

JavaScript

$('.archive-year').click(function(e) {
        e.preventDefault();
        $('.archive-year').removeClass('year-active');
        $(this).addClass('year-active');
        $(".news-container").removeClass("news-active");

        $('#news-'+$.trim($(this).text())).addClass("news-active");
    });