"Accordion Form Student Records"
Bootstrap 3.3.0 Snippet by wassj

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-file"> </span>DETAILS</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <div class="well well-sm well-primary"> <div class="row"> <div class="col-xs-4">Date Grant Budget Starts:</div> <div class="col-xs-8">--</div> </div> <div class="row"> <div class="col-xs-4">Date Grant Budget Ends:</div> <div class="col-xs-8">--</div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="grant1">IND-IDE Regulated:</label> <input type="text" class="form-control" id='grant1' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="protocol">Protocol#:</label> <input type="text" class="form-control" id'protocol' placeholder="protocol#" required /> </div> </div> </div> <div class="well well-sm well-primary"> <div class="row"> <div class="col-xs-3">Number of Sites:</div> <div class="col-xs-3">1</div> <div class="col-xs-3">CToA Status:</div> <div class="col-xs-3">Not Met</div> </div> <div class="row"> <div class="col-xs-3">Grant Activity:</div> <div class="col-xs-3">--</div> <div class="col-xs-3">Grant Branch:</div> <div class="col-xs-3">--</div> </div> <div class="row"> <div class="col-xs-3">Grant hidden:</div> <div class="col-xs-3">False</div> <div class="col-xs-3">Grant PI:</div> <div class="col-xs-3">--</div> </div> <div class="row"> <div class="col-xs-3">Grant PO:</div> <div class="col-xs-3">--</div> <div class="col-xs-3">Health Specialist:</div> <div class="col-xs-3">--</div> </div> <div class="row"> <div class="col-xs-3">Bakcup Support Person:</div> <div class="col-xs-3">--</div> <div class="col-xs-3">Grant Specialist:</div> <div class="col-xs-3">--</div> </div> <div class="row"> <div class="col-xs-3">Grantee Institution:</div> <div class="col-xs-3">--</div> <div class="col-xs-3">Subjects Active:</div> <div class="col-xs-3">--</div> </div> <div class="row"> <div class="col-xs-3">GrantActivity and Number:</div> <div class="col-xs-3">--</div> <div class="col-xs-3">Protocol Activity and Number:</div> <div class="col-xs-3">--</div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="protocol2">Protocol Number Alternative:</label> <input type="text" class="form-control" id='protocol2' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="grant2">Grant Number:</label> <select class="form-control" id="grant2"> <option></option> <option>Data4516</option> <option>Data24572457</option> <option>Data4516</option> <option>Data24572457</option> <option>Data4516</option> <option>Data24572457</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="protocol3">Protocol Short Title:</label> <input type="text" class="form-control" id='protocol3' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="protocol4">Protocol Title:</label> <input type="text" class="form-control" id'protocol4' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="division">Division:</label> <select class="form-control" id="division"> <option>Extramural Studies</option> <option>Intramural Studies</option> </select> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th-list"> </span>Leadership</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="contact1">CROMS Contact, Primary:</label> <input type="text" class="form-control" id='contact1' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="contact2">CROMS Contact, Secondary:</label> <input type="text" class="form-control" id='contact2' /> </div> </div> <div class="col-md-6"> <label for="grantor">Study PI</label> <select class="form-control" id="grantor"> <option>Name152</option> <option>Name123512</option> <option>Name4532</option> <option>Name152</option> <option>Name123512</option> <option>Name4532</option> <option>Name152</option> <option>Name123512</option> <option>Name4532</option> </select> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-th-list"> </span>Study/Subject Disposition and Administration</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="grantor">Study PI</label> <select class="form-control" id="grantor"> <option></option> <option>Additional NIDCR Oversight</option> <option>PI/PO Oversight</option> </select> </div> </div> </div> <div class="well well-sm well-primary"> <div class="row"> <div class="col-xs-3">Study Oversight Reasons:</div> <div class="col-xs-3">--</div> <div class="col-xs-3">GMethod of Additional Oversight:</div> <div class="col-xs-3">--</div> </div> <div class="row"> <div class="col-xs-3">GMethod of Additional Oversight - Other, Specify:</div> <div class="col-xs-3">--</div> <div class="col-xs-3">PO Study-level Comments::</div> <div class="col-xs-3">--</div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="monitor">Mdical Monitor Comments on Risk:</label> <input type="text" class="form-control" id='monitor' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="date">Date Enrollment Data Most Recently Uptated:</label> <input type="text" class="form-control" id='date' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="consented">Subjects Consented:</label> <input type="text" class="form-control" id='consented' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="entered">Subjects entered:</label> <input type="text" class="form-control" id='entered' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="completed">Subjects completed:</label> <input type="text" class="form-control" id='completed' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="status">Status:</label> <select class="form-control" id="status"> <option>Active</option> <option>Complete</option> <option>Data Analysis</option> <option>In Development</option> <option>Withdrawn</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="discontinued">Subjects Discontinued:</label> <input type="text" class="form-control" id='discontinued' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="recruitment">Recruitment Status:</label> <select class="form-control" id="recruitment"> <option>Closed</option> <option>Not Yet Recruiting</option> <option>Open</option> <option>Suspended</option> <option>Terminated</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="sites3">Number of Sites (Anticipated):</label> <input type="text" class="form-control" id='sites3' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="enrollment">Subject enrollment (Anticipated):</label> <input type="text" class="form-control" id='enrollment' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="Duration2">Proposed Duration:</label> <input type="text" class="form-control" id='Duration2' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="risk">Risk Approved</label> <div class="controls"> <label class="radio" for="risk-0"> <input type="radio" name="risk" id="risk-0" value="True" checked="checked"> True </label> <label class="radio" for="risk-1"> <input type="radio" name="risk" id="risk-1" value="False"> False </label> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="risk2">Risk Level:</label> <select class="form-control" id="risk2"> <option>Closed</option> <option>Minimul Risk Level</option> <option>More than Minimul Risk Level</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="date4">Protocol Approval Date:</label> <input type="date" class="form-control" id='date4' /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="version">Protocol Version-Most Recently Approved:</label> <input type="text" class="form-control" id='version' /> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-th-list"> </span>Dates</a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="fld-193" title="Date of the first subject's first study visit">Date: First Subject First Visit (FSFV):</label> <input type="date" class="form-control" id="fld-193" name="fld-193" value="" placeholder="YYYY-MM-DD" /> <label for="fld-199" title="Date the report from PI to NIDCR_Reports is due. Every 6-months unless otherwise specified.">Date: Next QM Report Due: :</label> <input type="date" class="form-control" id="fld-199" name="fld-199" value="" placeholder="YYYY-MM-DD" /> <label for="fld-200" title="Date of last QM report">Date: Last QM Report Received:</label> <input type="date" class="form-control" id="fld-200" name="fld-200" value="" placeholder="YYYY-MM-DD" /> <label for="fld-118" title="Date of next Safety Oversight Meeting">Safety Oversight: Date of Next Meeting:</label> <input type="date" class="form-control" id="fld-118" name="fld-118" value="" placeholder="YYYY-MM-DD" /> <label for="fld-120" title="Date of last IND Annual Report to the FDA">FDA: Date of Last IND Annual Report:</label> <input type="date" class="form-control" id="fld-120" name="fld-120" value="" placeholder="YYYY-MM-DD" /> <label for="fld-121" title="Date next IND Annual Report is due to the FDA">FDA: Due Date of Next IND Annual Report:</label> <input type="date" class="form-control" id="fld-121" name="fld-121" value="" placeholder="YYYY-MM-DD" /> <label for="fld-122" title="Date of last orphan drug annual report to the FDA">FDA: Date of Last Orphan Drug Annual Report:</label> <input type="date" class="form-control" id="fld-122" name="fld-122" value="" placeholder="YYYY-MM-DD" /> <label for="fld-123" title="Date next Orphan Drug Annual Report is Due to the FDA">FDA: Due Date of Next Orphan Drug Annual Report:</label> <input type="date" class="form-control" id="fld-123" name="fld-123" value="" placeholder="YYYY-MM-DD" /> <label for="fld-165" title="Date Most Recent Protocol Deviation Report Received">Date Most Recent Protocol Deviation Report Received:</label> <input type="date" class="form-control" id="fld-165" name="fld-165" value="" placeholder="YYYY-MM-DD" /> <label for="fld-166" title="Date that CROMS most recently followed up with a site re: protocol deviation reporting">Date CROMS Follow-up on Protocol Deviations:</label> <input type="date" class="form-control" id="fld-166" name="fld-166" value="" placeholder="YYYY-MM-DD" /> <label for="fld-179" title="Approximate date after which no additional CROMS services have been performed.">Date: CROMS Services Complete:</label> <input type="date" class="form-control" id="fld-179" name="fld-179" value="" placeholder="YYYY-MM-DD" /> </div> </div> <div class="col-md-6"> <label for="startDate" title="Study Start Date (Date of first site activation)">Date: Study Start:</label> <input type="date" class="form-control" id="startDate" name="startDate" value="2001-01-01" placeholder="YYYY-MM-DD" /> <label for="endDate" title="Study End Date (Date of last subject, last visit)">Date: Study End:</label> <input type="date" class="form-control" id="endDate" name="endDate" value="" placeholder="YYYY-MM-DD" /> <label for="fld-49" title="Anticipated study start date (CToA)">Date: Study Start (Anticipated):</label> <input type="date" class="form-control" id="fld-49" name="fld-49" value="" placeholder="YYYY-MM-DD" /> <label for="fld-50" title="Date PO approved the study for funding (CToA)">Date: PO CToA Approval Date:</label> <input type="date" class="form-control" id="fld-50" name="fld-50" value="" placeholder="YYYY-MM-DD" /> <label for="fld-52" title="Date relevant documents were requested by PO (CToA)">Date: Relevant Documents Requested:</label> <input type="date" class="form-control" id="fld-52" name="fld-52" value="" placeholder="YYYY-MM-DD" /> <label for="fld-57" title="Date of last Safety Oversight Committee Meeting">Safety Oversight: Date of Last Meeting:</label> <input type="date" class="form-control" id="fld-57" name="fld-57" value="" placeholder="YYYY-MM-DD" /> <label for="fld-170" title="Date of the DOCRA or planning call.">Date: DOCRA Call:</label> <input type="date" class="form-control" id="fld-170" name="fld-170" value="" placeholder="YYYY-MM-DD" /> <label for="fld-174" title="Date that at least one member of the study team attended a QM General Training call.">Date: QM General Training:</label> <input type="date" class="form-control" id="fld-174" name="fld-174" value="" placeholder="YYYY-MM-DD" /> <label for="fld-188" title="Frequency that PI sends reports to Medical Monitor. May be annually, biannually, or some other specified time interval.">MMOR Frequency:</label> <select id="fld-188" name="fld-188"> <option value=""></option> <option value="1145" title="Annual">Annual</option> <option value="1147" title="Other">Other</option> <option value="1146" title="Twice Annually">Twice Annually</option> </select> <label for="fld-185" title="Date the report from PI to Medical Monitor is due. Every 6-months unless otherwise specified.">Date: Next MM Oversight Report Due:</label> <input type="date" class="form-control" id="fld-185" name="fld-185" value="" placeholder="YYYY-MM-DD" /> <label for="fld-187" title="Date the most recent report from PI to Medical Monitor was received.">Date: Last MM Oversight Report Received:</label> <input type="date" class="form-control" id="fld-187" name="fld-187" value="" placeholder="YYYY-MM-DD" /> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"><span class="glyphicon glyphicon-th-list"> </span>Administration</a> </h4> </div> <div id="collapseFive" class="panel-collapse collapse"> <div class="panel-body"> <div class="row"> <div class="col-md-6"> <label for="fld-194" title="Text field to capture dates of previous submissions">MM Oversight Report: Dates of Previous Reports:</label> <input type="text" class="form-control" id="-194" name="fld-194" value="" /> <label for="fld-195" title="Text field to capture dates of previous submissions">QM: Dates of Previous Reports:</label> <input type="text" class="form-control" id="-195" name="fld-195" value="" /> <label for="fld-205" title="Planned frequency of monitoring visits; e.g., Every 6 months, Annually, Every 2 years, After every X subjects are enrolled">CMP: Monitoring Frequency:</label> <input type="text" class="form-control" id="-205" name="fld-205" value="" /> <label for="fld-206" title="E.g., 100% SDV for the first 5 subjects; then key fields for 50% of all subjects dosed">CMP: % or # of Records to be Reviewed:</label> <input type="text" class="form-control" id="-206" name="fld-206" value="" /> <label for="fld-207" title="% of consents to be reviewed (NIDCR policy is to review 100%)">CMP: % of Consents to be Reviewed:</label> <input type="text" class="form-control" id="-207" name="fld-207" value="" /> <label for="fld-208" title="E.g., After X subjects enrolled">CMP: Timing of 1st IMV:</label> <input type="text" class="form-control" id="-208" name="fld-208" value="" /> <label for="fld-209" title="Summary of any anticipated remote monitoring activity">CMP: Planned Remote Monitoring:</label> <input type="text" class="form-control" id="-209" name="fld-209" value="" /> <label for="fld-210" title="">CMP: Comments:</label> <input type="text" class="form-control" id="-210" name="fld-210" value="" /> <label for="fld-186" title="Number of manuscripts that CROMS has supported for the current study.">Number of Manuscripts Supported by CROMS:</label> <input type="number" class="form-control" id="-186" name="fld-186" value="" /> <label for="fld-130" title="Summary of Study Services Provided by non-CROMS Groups">Services Provided Outside of CROMS:</label> <input type="text" class="form-control" id="-130" name="fld-130" value="" /> </div> <div class="col-md-6"> <label for="fld-178" title="CROMS Services Status">CROMS Services Status:</label> <select class="form-control" id="fld-178" name="fld-178"> <option value=""></option> <option value="969" title="CROMS has been asked to complete a DOCRA or planning call.">CROMS Call Pending</option> <option value="968" title="OCTOM has determined that CROMS services will not be provided.">No CROMS Services – Confirmed</option> <option value="970" title="CROMS has completed a DOCRA or planning call; OCTOM’s Determination of Services is pending.">Post Call – Services Pending</option> <option value="972" title="CROMS services have been completed; no services are currently underway.">Services Complete</option> <option value="971" title="CROMS is currently providing services for this study.">Services In Process</option> </select> <label for="fld-131" title="Administrative Comments">CROMS Administrative Comments:</label> <input type="text" class="form-control" id="-131" name="fld-131" value="" /> <label for="fld-132" title="Clinical Monitoring Group">Clinical Monitoring Group:</label> <input type="text" class="form-control" id="-132" name="fld-132" value="" /> <label for="fld-141" title="Administrative Comments">OCTOM Administrative Comments:</label> <input type="text" class="form-control" id="-141" name="fld-141" value="" /> <p>PO Grant-level Comments: </p> <label for="fld-146" title="Safety Oversight Committee (i.e., DSMB, DSMC, CSOC) hyperlink to NIDCR-CROMS Website">Safety Oversight Committee Hyperlink:</label> <input type="text" class="form-control" id="-146" name="fld-146" value="" /> <label for="fld-173" title="Notes regarding General QM training attendance, along with a list of study sites that have participated.">CROMS QM Comments:</label> <input type="text" class="form-control" id="-173" name="fld-173" value="" /> </div> </div> </div> </div> </div> </div> </div> </div> </div>
.form-inline .form-group { margin-right:10px; } .well-primary { color: rgb(255, 255, 255); background-color: rgb(66, 139, 202); border-color: rgb(53, 126, 189); } .glyphicon { margin-right:5px; }

Related: See More


Questions / Comments: