JSFiddle - React, Tailwind, and code Playground

HTML

<div class="notificationDetail">
    <div class="header">
        <div class="Collapse"> 
            <div class="rowHead1"><span>2014-10-10</span></div> 
            <div class="rowHead_but"><i class="icon-double-angle-down"></i></div> 
        </div>
        <div class="Collapse"> 
            <div class="rowHead2"><span>2014-10-10</span></div> 
            <div class="rowHead_but"><i class="icon-double-angle-down"></i></div> 
        </div>
        <div class="Collapse"> 
            <div class="rowHead3"><span>2014-10-10</span></div> 
            <div class="rowHead_but"><i class="icon-double-angle-down"></i></div> 
        </div>
    </div>
</div>

CSS

.icon-double-angle-down:after {
    content:'down'
}
.icon-double-angle-up:after {
    content:'up'
}

JavaScript

$('.notificationDetail').on('click', '.Collapse', function (e) {
    e.stopPropagation();
    $('.rowHead_but i', this).toggleClass('icon-double-angle-down icon-double-angle-up');
});