Javascript behavior control through data attribute

by tmoura

HTML

<div class="tweetcontainer" data-target="#tb1">
    <div class="avatar"></div>
    <div class="content">
      <div class="tweetheader">
        <h1>John Drake</h1>
        <h2>@Drakejon</h2>
        <div class="tweettime">10m</div>
      </div>
      <div>
        <p>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> </p>
      </div>
    </div>
  </div>
  <!-------------Tool Bar -------------------------------->
  <ul id="tb1" 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 class="tweetcontainer" data-target="#tb2">
    <div class="avatar"></div>
    <div class="content">
      <div class="tweetheader">
        <h1>John Drake</h1>
        <h2>@Drakejon</h2>
        <div class="tweettime">10m</div>
      </div>
      <div>
        <p>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> </p>
      </div>
    </div>
  </div>
  <!-------------Tool Bar -------------------------------->
  <ul id="tb2" 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...

CSS

#wrapper {
    width: 600px;
    overflow: hidden;
}
.tweetcontainer {
    padding: 12px;
    overflow: hidden;
    background-color: #333;
    cursor: pointer;
    border-bottom: 1px solid #666;
}
a:link, a:active {
    color: #0CF;
}
a:hover {
    text-decoration: underline;
}
h1, h2, p {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 18px;
}
h1 {
    font-size: 16px;
    color: #09F;
    font-weight: bolder;
}
h2 {
    font-size: 12px;
    color: #CCC;
    margin: 0px 0px 0px 10px;
}
.floatL {
    float: left;
}
.floatR {
    float: right;
}
p {
    font-size: 15px;
    color: #FFF;
    word-wrap: break-word;
}
.avatar {
    width: 48px;
    height: 48px;
    float: left;
    margin: 0px 12px 12px 0px;
    background-color: #999;
    border-radius: 5px;

}
.content {
    overflow: hidden;
    float: left;
    width: 510px;
}
.tweetheader {
    margin: 0px 0px 5px 0px;
    overflow: hidden;
}

h1 {
    float: left;
    margin: 0px 8px 0px 0px;
}
h2 {
    float: left;
    font-size: 12px;
}
.tweettime {
    float: right;
    width: 30px;
    color: #CCC;
    font-size: 12px;
    line-height: 18px;
    font-family: Arial, Helvetica, sans-serif;
}
.toolbar {
    background-image: url(http://edi.io/twitteractions.png);
    width: 600px;
    height: 40px;
    display: none;
}
.toolbar span {
    display: none;
}
.toolbar li {
    list-style: none;
    float: left;
    display: inline-block;
}
.toolbar a {
    height: 30px;
    margin: 5px;
    display: block;
}
.reply { 
    width: 100px;
}
.retweet {
    width: 130px;
}
.favorite {
    width: 120px;
}
.track {
    width: 100px;
}
.details {
    width: 100px;
}

JavaScript

$('.tweetcontainer').on('click', function () {
    $(this).next().slideToggle('fast');
});