AssignmentModalContents
by Steve Coffman
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/fonts/fontawesome-webfont.ttf"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
1st: Choose Learning Experience
<i class="indicator fa fa-chevron-down pull-right"></i>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body padded-panel">
<div class="row">
<div class="col-sm-5">
<div class="panel panel-primary" id="chosenLearningExperiencesContainer">
<div class="panel-heading">
<h3 class="panel-title">Chosen Learning Experiences</h3>
</div>
<div class="panel-body">
<ul class="list-group" id="chosenLearningExperiences"></ul>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="add-remove-buttons">
<button id="btnAddLE" name="btnRemoveLE" type="button" class="btn btn-primary btn-small"><i class="fa fa-arrow-left"></i>
</button>
<button id="btnRemoveLE"...
JavaScript
/*global $:false */
function toggleChevron(e) {
'use strict';
$(e.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);