BS3 Accordion

Standard accordion using Bootstrap 3

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="panel-group visible-xs visible-sm" >
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading-contact-info">
            <h4 class="panel-title">
                <span data-toggle="collapse" data-parent="#profile-accordion" href="#collapse-contact-info" aria-expanded="true" aria-controls="collapse-contact-info" class="">
                    Contact Info                        </span>
            </h4>
        </div>

        <div id="collapse-contact-info" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-contact-info" aria-expanded="true">
            <div class="panel-body">
                ...                 
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading-club-affiliations">
            <h4 class="panel-title">
                <span data-toggle="collapse" data-parent="#profile-accordion" href="#collapse-club-affiliations" aria-expanded="false" aria-controls="collapse-club-affiliations" class="collapsed">
                    Club Affiliations                        </span>
            </h4>
        </div>

        <div id="collapse-club-affiliations" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-club-affiliations" aria-expanded="false">
            <div class="panel-body">
                ...                     
            </div>
        </div>
    </div>
    
</div>