JSFiddle - React, Tailwind, and code Playground

by anar1811

HTML

<script> 
       var apocount = 1; 
</script> 

<div class="mascomma">
    <a onclick="if(apocount!=1) {$('div.mm').slideUp(100);$('#commlin').slideToggle('slow');apocount=1;}" href="javascript://">Comments</a>     
<a onclick="if(apocount!=2) {$('div.mm').slideUp(100);$('#commdin').slideToggle('slow');apocount=2;}" href="javascript://">Facebook</a>     
    <a onclick="if(apocount!=3) {$('div.mm').slideUp(100);$('#commfin').slideToggle('slow');apocount=3;}" href="javascript://">Vkontakte</a> </div>

<div style="display:block" class="mm" id="commlin">Код области 1</div>     
<div style="display:none" class="mm" id="commdin">Код области 2</div>     
<div style="display:none" class="mm" id="commfin">Код области 3</div>

CSS

.mascomma{
    border-bottom:3px solid #ff8825;
}
.mascomma a{
    background:#ff8825;
    padding: 3px 6px;
    color:#FFF;
    text-decoration;
    margin:5px 20px 0px 0px;
}
.mascomma a:active{
    background:#330033;
}