JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="head" class="heading">
    Heading
    <a href="#" onclick="exp()">
        <p id="ico" class="pull-right minus white"></p></a>
</div>
<div id="bodycol" class="body">
    checking font-awesome csss
</div>

CSS

.heading{
    background-color:grey;
    color:black;
}
.white{
    color:white;
    font-size:15px;
}
.body{
    background-color:lightGrey;
    height:150px;
    color:black;
}
.minus:before{
     font-family:"FontAwesome";
     content:"\f147";
    color:white;
    font-size:15px;
}
.plus:before{
    font-family:"FontAwesome";
     content:"\f196";
    color:white;
    font-size:15px;
}

JavaScript

function exp(){
    var dat = document.getElementById("bodycol");
    var icon  = document.getElementById("ico");
    if(bodycol.style.display != "none"){
        dat.style.display = "none";
        icon.style.float = "right";
        icon.className = "plus";
    }
    else{
        dat.style.display = "block";        
        icon.style.float = "right";    
        icon.className = "minus";
    }
    
}