<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div>
<a class="btn btn-primary" role="button" href="#model-id" data-toggle="modal">Button</a> ·<br/></div>
<div>
<br/>
</div>
<div tabindex="-1" class="modal fade" id="model-id" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
<h3>Work Instruction</h3>
</div>
<div class="modal-body">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapse1" data-toggle="collapse" data-parent="#accordion"> Purpose</a> </h4>
</div>
<div class="panel-collapse collapse in" id="collapse1">
<div class="panel-body">The purpose of this document is to describe the processes involved in Archiving MSC Governed Documents including: CRD Wiki, Job Aid Template/Form, Work Instruction, and Kendeo Map documents. MSC Governed Documents are Archived instead of Deleted.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapse2" data-toggle="collapse" data-parent="#accordion"> Roles & Responsibilities</a> </h4>
</div>
<div class="panel-collapse collapse" id="collapse2">
<div class="panel-body">Each functional area is responsible for for the management of the content within their own document libraries, but Knowledge Mangement is responsible for correctly Archiving documents. Document Archiving is done per the request of the functional area to which it belongs.</div>
</div>