JSFiddle - React, Tailwind, and code Playground

by MAz Mawan

HTML

<button class='fb-show'>FB Comments</button>
<button class='fb-hide' style='display:none;'>Closed</button>
<div class='fb-komen'>
<div class='pad'>
  <div class='fb-comments' data-num-posts='2' data-width='644' expr:data-href='data:blog.url'/>
</div>
</div>

CSS

.fb-komen {
margin-top:6px;
background:#fff;
border-radius : 4px;
color : #aaa; 
display:none;
}
.pad{
padding:0 10px 0 10px;
}

JavaScript

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
  <script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    $(".fb-hide").click(function () {
        $(".fb-komen").hide();
        $(".fb-hide").hide();
        $(".fb-show").show();
    });
    $(".fb-show").click(function () {
        $(".fb-komen").show();
        $(".fb-hide").show();
        $(".fb-show").hide();
    });
});
//]]>