JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="row-fluid summary">
    
    <div class="span1">
        <button class="btn btn-success collapsed" data-toggle="collapse" data-target="#intro">
        <span class="hide-ctrl">
                <i class="fa fa-chevron-up"></i> Personal Details
            </span> 
            <span class="show-ctrl">
                <i class="fa fa-chevron-down"></i> Personal Details
            </span>
                       
        </button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

CSS

button.btn
{
    .show-ctrl{
        display: none;
    }
    .hide-ctrl{
        display: block;
    }
    &.collapsed{
        .show-ctrl{
            display: block;
        }
        .hide-ctrl{
            display: none;
        }
    }
}