$(function(){
  var d=function(){if($(this).is(".selected")) return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1])};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")?
"tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d)
});

/* .systab .tab => les onglet */
.systab .tab {
  padding:3px 3px;
  margin-right:-5px;
  cursor: pointer;
}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
  margin-right:-5px;
}
/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
  margin-right:-5px;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets  */
.systab .contents {
  margin-top: 1px;
  margin-bottom: 1px;
  width:202px;
  height:115px;
  overflow:auto;
    background-color:#FFFFFF;
  border-top:2px solid #CD5C5C;
  border-bottom:2px solid #CD5C5C;
  padding:2px;
}
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
  display: block;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
  float: left;
}

<div class="systab">
  <div class="selected">
    <span><img src="http://data3.whicdn.com/images/61461863/large.jpg" width="45" img style="border:2px solid #fee3bb;"></span>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </div><div>
    <span><img src="http://25.media.tumblr.com/tumblr_m5tkgcNDBa1qegba2o2_250.gif" width="45" img style="border:2px solid #fee3bb;margin-right:-5px;"></span>
    Mon contenu 2
  </div>
  <div>
    <span><img src="http://static.tumblr.com/33c6e550d45dafe474afe72165fcd9ce/hauimv8/4Dumfeit3/tumblr_static_jessica.gif" width="45" img style="border:2px solid #fee3bb;"></span>
    Mon contenu 3
  </div><div>
    <span><img src="http://24.media.tumblr.com/tumblr_m6lekmvyKS1r7xf6to5_250.gif" width="45" img style="border:2px solid #fee3bb;"></span>
    Mon contenu 4
  </div>
</div>