Javascript behavior control through data attribute

by ErikE

HTML

<div class="tweetcontainer">
    <div class="avatarcontainer">
        <div class="avatar"></div>
    </div>
    <div class="content">
        <div class="tweetheader">
            <div class="name">
                <h1>John Drake</h1>
            </div>
            <div class="tweethandle">
                <h2>@Drakejon</h2>
            </div>
            <div class="tweettime">10m</div>
        </div>
        <div class="tweet">
            Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform <a href="http://tcrn.ch/11m3BrO">http://tcrn.ch/11m3BrO</a> by <a href="#">@sohear</a>
        </div>
    </div>
    <ul class="toolbar">
        <li><a class="reply" href="#"><span>reply</span></a></li>
        <li><a class="retweet" href="#"><span>retweet</span></a></li>
        <li><a class="favorite" href="#"><span>favorite</span></a></li>
        <li><a class="track" href="#"><span>track</span></a></li>
        <li><a class="details" href="#"><span>details</span></a></li>
    </ul>    
</div>
<div class="tweetcontainer">
    <div class="avatarcontainer">
        <div class="avatar"></div>
    </div>
    <div class="content">
        <div class="tweetheader">
            <div class="name">
                <h1>John Drake</h1>
            </div>
            <div class="tweethandle">
                <h2>@Drakejon</h2>
            </div>
            <div class="tweettime">10m</div>
        </div>
        <div class="tweet">
            Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform <a href="http://tcrn.ch/11m3BrO">http://tcrn.ch/11m3BrO</a> by <a href="#">@sohear</a>
        </div>
    </div>
    <ul class="toolbar">
        <li><a class="reply" href="#"><span>reply</span></a></li>
        <li><a class="retweet" href="#"><span>retweet</span></a></li>
        <li><a class="favorite" href="#"><span>favorite</span></a></li>
        <li><a class="track" href="#"><span>track</span></a></li>
        <li><a...

CSS

html {
    font-family:Tahoma, Arial, Calibri, sans-serif;
}
div.tweetcontainer {
    border:1px solid black;
}
.tweetheader {
    color:white;
    background-color:#3355dd;
    display:inline-block;
    padding:2px 4px;
}
.tweetheader .name {
    font-weight:bold;
}
.tweethandle {
    font-style:italic;
}
.tweettime {
    font-size:0.8em;
}
.content {
    font-size:0.9em;
}
.tweet {
    display:inline-block;
    width:400px;
    padding:2px;
    vertical-align:top;
}
ul.toolbar {
    display:none;
    border:1px solid #35d;
    background-color:#35d;
    color:white;
    padding:2px;
}
ul.toolbar a {
    padding: 3px 3px 3px 4px;
    display:inline-block;
    text-decoration:none;
    color:#008;
    background-color:#57f;
    font-size:0.8em;
}
ul.toolbar li {
    display:inline-block;
}
ul.toolbar a:hover {
    color:#ff8;
    background-color:#8af;
}

JavaScript

$.expr[':'].descendantof = function(obj, index, meta, stack){
    return $(obj).parents().andSelf().is(meta[3]);
};

$('.tweetcontainer').on('click', function(event) {
    if ($(event.target).is(':descendantof(.toolbar)')) { return; }
    $(this).find('.toolbar').slideToggle();
});