JSFiddle - React, Tailwind, and code Playground

by janetyc

HTML

<div class="_5wd4 _1nc7 direction_ltr _5yt9 _2cnu logged" data-reactid=".10.$mid=11433659855385=291436bae192245d347"><a aria-label="黃啟胖14:50" class="_5ys_" data-hover="tooltip" data-tooltip-position="left" href="https://www.facebook.com/Huang.ChiChia" data-reactid=".10.$mid=11433659855385=291436bae192245d347.1" id="js_1f"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpa1/v/t1.0-1/p64x64/1800228_10152869859554214_3479415816676831774_n.jpg?oh=ba83b06f52522b83e0e3faf97e3a117a&amp;oe=55F60BEA&amp;__gda__=1446097621_1d31fabe31a41506ada43c9b2b1237c1" data-reactid=".10.$mid=11433659855385=291436bae192245d347.1.0"></a>

<div class="_5wd9" data-reactid=".10.$mid=11433659855385=291436bae192245d347.2:0"><div class="_5wde" data-reactid=".10.$mid=11433659855385=291436bae192245d347.2:0.0"><div class="_5w1r _5wdf annotate" style="max-width:188px;" data-reactid=".10.$mid=11433659855385=291436bae192245d347.2:0.0.0"><div class="_d97" data-reactid=".10.$mid=11433659855385=291436bae192245d347.2:0.0.0.0"><span class="_5yl5" data-reactid=".10.$mid=11433659855385=291436bae192245d347.2:0.0.0.0.0"><span data-reactid=".10.$mid=11433659855385=291436bae192245d347.2:0.0.0.0.0.0">真是麻煩</span></span>
</div></div></div>
<div class="_annotate_"><a aria-label="emotion tag" data-hover="tooltip" data-tooltip-position="right"><div class="_emotion _happy current_emotion"></div></a>
</div>
<div class="emolist"><div class="_emotion _happy"></div><div class="_emotion _smile"></div><div class="_emotion _surprise"></div><div class="_emotion _sad"></div><div class="_emotion _cry"></div></div>    
</div>


<div class="_3ry4" data-reactid=".10.$mid=11433659855385=291436bae192245d347.2:1"><div class="_5wda clearfix _2fs6 _2fs2" data-reactid=".10.$mid=11433659855385=291436bae192245d347.2:1.0"><div class="_2fs1" data-reactid=".10.$mid=11433659855385=291436bae192245d347.2:1.0.0"></div><span data-reactid=".10.$mid=11433659855385=291436bae192245d347.2:1.0.1"></span></div>
</div>
    
   
</div>

CSS

._5w1r{background-size:100% 100% \0/;border:1px solid #dcdee3;border:1px solid rgba(0, 0, 0, .18);border-bottom-color:rgba(0, 0, 0, .29);-webkit-border-radius:4px;-webkit-box-shadow:0 1px 0 #dce0e6;color:#373e4d;min-height:22px;min-width:14px;position:relative;text-shadow:rgba(255, 255, 255, .5) 0 1px 0;white-space:pre-wrap;word-wrap:break-word}
._5w1r._d98{min-height:14px;min-width:0;padding-bottom:3px;padding-top:4px}
._3okg:after,._3okg:before{content:'';position:absolute;width:8px}
._3okg:after{background-repeat:no-repeat;height:13px;top:5px}
._3okg:before{bottom:0;clip:rect(5px, 13px, 18px, 0);top:0}

._1nc6 ._5w1r{margin-right:6px}._1nc6 ._5w1r._d98{padding-left:6px;padding-right:5px}
._1nc6 ._3okg:after,._1nc6 ._3okg:before{left:100%}._1nc6 ._3okg:after{background-image:url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yi/r/f2BBnshHuvA.png);background-repeat:no-repeat;background-size:312px 220px;background-position:-157px -188px}._1nc6 ._d97{padding-left:6px;padding-right:5px}._1nc7 ._5w1r{float:left;margin-left:6px}._1nc7 ._5w1r._d98{padding-left:5px;padding-right:6px}._1nc7 ._3okg:after,._1nc7 ._3okg:before{right:100%}._1nc7 ._3okg:after{background-image:url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yi/r/f2BBnshHuvA.png);background-repeat:no-repeat;background-size:312px 220px;background-position:-148px -188px}._1nc7 ._d97{padding-left:5px;padding-right:6px}._1nc6 ._5w1r,._1nc6 ._3okg:before{background-color:#dbedfe;background-image:-webkit-gradient(linear, center bottom, center top, from(#c7defe), to(#e7f1fe));background-image:-webkit-linear-gradient(bottom, #c7defe, #e7f1fe);background-image:url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yn/r/57z4kK928BK.png) \0/}._1nc7 ._5w1r,._1nc7 ._3okg:before{background-color:#f6f7f8;background-image:-webkit-gradient(linear, center bottom, center top, from(#f2f2f2), to(#fff));background-image:-webkit-linear-gradient(bottom, #f2f2f2,...

JavaScript

$('._annotate_ a').on("click", function(){
    var parent = $(this).parent();
    var emolist = parent.next(".emolist");
    emolist.toggle();
});

$(".emolist div._emotion").on("click", function(){
    var emolist = $(this).parent();
    emolist.toggle();
});