Bootstrap 3: MidClerkship Feedback Form

by Steve Coffman

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="panel panel-primary">
    <div class="panel-body">
        <div class="row">
            <div>
                <div class="col-sm-1 person-information-block-picture">
                    <img src="http://placehold.it/80x120" />
                </div>
                <div class="col-sm-4">
                    <p class="person-information-block-text">Al-Hadidi, Nour</p>
                    <p class="person-information-block-text">M3</p>
                    <p class="person-information-block-text">709GENI.U</p>
                    <p class="person-information-block-text">Period 1</p>
                    <p>Academic Year 2015</p>
                </div>
            </div>
            <div class="col-sm-6 pull-right">
                <div id="evaluatorname">Evaluator: Admon, Andrew</div>
                <div id="evaluationdate">Date: 04/23/2014</div>
                <div id="learningexperience">Learning Experience: Elective Experience</div>
                <div id="formid">Form: Elective M4 Form</div>
            </div>
        </div>
        <div class="row">&nbsp;</div>
    </div>
</div>
<div class="panel-group" id="accordion">
    <div class="panel panel-primary">
        <div class="panel-heading">
             <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Student Feedback
                <i class="indicator fa pull-right fa-chevron-down"></i>
        </a>
      </h4>

        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="panel panel-default">
                    <div class="panel-heading">Clinical Performance</div>
      ...

CSS

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 999px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
.upload-btn-group {
    width: 67%;
}

JavaScript

function toggleChevron(event) {
    'use strict';
    $(event.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('fa-chevron-right fa-chevron-down');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);