JSFiddle - React, Tailwind, and code Playground

HTML

<article class="feed1 entry">
    <span class="article-row" style="width: 1360px;">
        <span class="article-row-title">Title</span>
        <span class="article-row-date">18-8-2013</span>
    </span>
    <div class="content"><div class="close">×</div>
        The Content
    </div>
</article>
<article class="feed1 entry">
    <span class="article-row" style="width: 1360px;">
        <span class="article-row-title">Title</span>
        <span class="article-row-date">18-8-2013</span>
    </span>
    <div class="content"><div class="close">×</div>
        The Content
    </div>
</article>
<article class="feed1 entry">
    <span class="article-row" style="width: 1360px;">
        <span class="article-row-title">Title</span>
        <span class="article-row-date">18-8-2013</span>
    </span>
    <div class="content"><div class="close">×</div>
        The Content
    </div>
</article>

CSS

article {
    border-bottom: 1px solid #CCCCCC;
    float: left;
    font-size: 15px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
}
.article-row {
    cursor: pointer;
    float: left;
    margin: 0;
    padding: 6px 10px;
    position: relative;
}
.article-row-title {
    font-size: 13px;
    font-weight: bold;
}
.article-row-date {
    color: #ACACAC;
    font-size: 12px;
    font-weight: normal;
}
.content {
    display: none;
    float: left;
    padding: 20px 40px;
    position: relative;
}
.close{
    position:absolute;
    top:5px;
    right:5px;
    cursor:pointer;
}
}

JavaScript

$('.article-row').click(function(e){
    e.preventDefault();
    $('.article-row').not(this).hide();
	if($(this).parent().find('.content').is(':visible')){
		$('.content').hide();
	}else{
		$('.content').hide();
		$(this).parent().find('.content').show();
	}
});

$('.close').click(function(e){
    $('.article-row').show();
    $(this).parent().hide();    
});