Description: The nested comment box is a view that allows users to view and add comments. This component is a new component for write backs.
508 Guidelines: The nested comment box contains accordions, lists and faux table, which will follow the same 508 guidelines for those sections.
<div class="nested-comment-box">
<div class="sr-only">This table represents Selected Diagnoses catagorized by Diagnosis, Comments, Add to CL, and Primary.</div>
<div class="header">
<div>
<span>Diagnosis</span>
</div>
<div>
<span>Comments</span>
</div>
<div>
<span>Add to CL</span>
</div>
<div>
<span>Primary</span>
</div>
</div>
<div class="accordion-container panel-group small faux-table-header" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<div class="panel-title">
<div class="sr-only"><span>You are on an accordion heading. The accordion is collapsed. To expanded the accordion press enter on the accordion heading.</span></div>
<div>
<span>Hypertension (ICD-9-CM 401.9)</span>
</div>
<div>
<a class="btn btn-sm btn-icon" title="Press enter to add comment" data-toggle="collapse" href="#diagnosesOne" aria-expanded="true" aria-controls="diagnosesOne">Add</a>
</div>
<div>
<div class="control form-group">
<div class="checkbox">
<label class="checkbox-inline" for="diagnoses1">
<input type="checkbox" value="option1" aria-label="To add this diagnoses to the CL, press the spacebar" id="diagnoses1">
<span class="sr-only" aria-hidden="true">Add diagnosis</span></label>
</div>
</div>
</div>
<div>
<span><button type="button" class="btn btn-sm btn-icon" title="This diagnosis is set as primary">Primary</button></span>
</div>
</div>
</div>
<div id="diagnosesOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="comment-box">
<div class="faux-table-container comments-container">
<div class="faux-table">
<div class="body">
<div class="table-row">
<div>
<span>The patient is lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 01/26/2015 08:12 - Vehu, Five</span>
</div>
<div>
<span>
<button type="button" class="btn btn-icon" title="Press enter to edit comment"><i class="fa fa-pencil"></i></button>
<button type="button" class="btn btn-icon" title="Press enter to delete comment"><i class="fa fa-trash"></i></button>
</span>
</div>
</div>
<div class="table-row">
<div>
<span>The patient is lorem ipsum dolor sit amet. 01/26/2015 08:12 - Vehu, Five</span>
</div>
<div>
<span>
<button type="button" class="btn btn-icon" title="Press enter to edit comment"><i class="fa fa-pencil"></i></button>
<button type="button" class="btn btn-icon" title="Press enter to delete comment"><i class="fa fa-trash"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<div class="form-group col-xs-8">
<label for="comment1" class="sr-only">Comment</label>
<input class="form-control" type="text" name="name" title="Please edit comment" placeholder="Add Comment…" id="comment1" />
<span class="help-block">60 characters remaining…</span>
<label for="comment11" class="sr-only hidden">Comment</label>
<input class="form-control input-sm hidden" type="text" name="name" title="Please enter in comment" placeholder="Add Comment…" id="comment11" />
<span class="help-block hidden">60 characters remaining…</span>
</div>
<div class="col-xs-4">
<div>
<div class="col-xs-6 hidden">
<button type="button" class="btn btn-default btn-sm" title="Press enter to cancel">Cancel</button>
</div>
<div class="col-xs-6 hidden">
<button type="button" class="btn btn-default btn-sm" title="Press enter to save comment">Save</button>
</div>
<div class="col-xs-12">
<button type="button" class="btn btn-default btn-block" title="Press enter to add comment">Add Comment</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-heading" role="tab" id="headingTwo">
<div class="panel-title">
<div class="sr-only"><span>You are on an accordion heading. The accordion is collapsed. To expanded the accordion press enter on the accordion heading.</span></div>
<div>
<span>Hypertension (ICD-9-CM 401.9)</span>
</div>
<div>
<a class="btn btn-icon" data-toggle="collapse" href="#diagnosesTwo" aria-expanded="true" aria-controls="diagnosesTwo" title="Press enter tp view comments"><i class="fa fa-file-text"></i></a>
</div>
<div>
<div class="control form-group">
<div class="checkbox">
<label class="checkbox-inline" for="diagnoses2">
<input type="checkbox" value="option1" aria-label="To add this diagnoses to the CL, press the spacebar" id="diagnoses2">
<span class="sr-only" aria-hidden="true">Add diagnosis</span></label>
</div>
</div>
</div>
<div>
<span><button type="button" class="btn btn-sm btn-icon" title="Press enter to set as primary diagnosis">Set Primary</button></span>
</div>
</div>
</div>
<div id="diagnosesTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="comment-box">
<div class="faux-table-container comments-container">
<div class="faux-table">
<div class="body">
<div class="table-row">
<div>
<span>The patient is lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 01/26/2015 08:12 - Vehu, Five</span>
</div>
<div>
<span>
<button type="button" class="btn btn-icon" title="Press enter to edit comment"><i class="fa fa-pencil"></i></button>
<button type="button" class="btn btn-icon" title="Press enter to delete comment"><i class="fa fa-trash"></i></button>
</span>
</div>
</div>
<div class="table-row">
<div>
<span>The patient is lorem ipsum dolor sit amet. 01/26/2015 08:12 - Vehu, Five</span>
</div>
<div>
<span>
<button type="button" class="btn btn-icon" title="Press enter to edit comment"><i class="fa fa-pencil"></i></button>
<button type="button" class="btn btn-icon" title="Press enter to delete comment"><i class="fa fa-trash"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<div class="form-group col-xs-8">
<label for="comment2" class="sr-only">Comment</label>
<input class="form-control" type="text" name="name" title="Please edit comment" placeholder="Add Comment…" id="comment2" />
<span class="help-block">60 characters remaining…</span>
<label for="comment22" class="sr-only hidden">Comment</label>
<input class="form-control hidden" type="text" name="name" title="Please enter in comment" placeholder="Add Comment…" id="comment22" />
<span class="help-block hidden">60 characters remaining…</span>
</div>
<div class="col-xs-4">
<div>
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-block" title="Press enter to cancel">Cancel</button>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-block" title="Press enter to save comment">Save</button>
</div>
<div class="col-xs-12 hidden">
<button type="button" class="btn btn-default btn-block" title="Press enter to add comment">Add Comment</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Copy
<div class="nested-comment-box nested-comment-box-alt">
<div class="sr-only">This table represents Selected Diagnoses catagorized by Diagnosis, Comments, Add to CL, and Primary.</div>
<div class="header">
<div>
<div>Procedure</div>
</div>
<div>
<div>Comments</div>
</div>
<div>
<div>Quantity</div>
</div>
<div>
<div>Provider</div>
</div>
<div>
<div>Add Modifiers</div>
</div>
</div>
<div class="accordion-container panel-group small faux-table-header" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<div class="panel-title">
<div class="sr-only"><span>You are on an accordion heading. The accordion is collapsed. To expanded the accordion press enter on the accordion heading.</span></div>
<div>
<span>Item 12345 - modifier name, another modifier name, another…</span>
</div>
<div>
<a class="btn btn-sm btn-icon" title="Press enter to add comment" data-toggle="collapse" href="#proceduresOne" aria-expanded="true" aria-controls="proceduresOne">Add</a>
</div>
<div>
<div class="control form-group">
<label for="quantity1" class="sr-only">Quanity</label>
<input class="form-control input-sm" type="text" title="Enter in numeric value" placeholder="1" id="quantity1" />
</div>
</div>
<div>
<div class="control form-group">
<label for="procedure-provider1" class="sr-only">Select Provider</label>
<select class="form-control input-sm" name="options" title="To view options, use the up and down arrow keys and press enter to select" id="procedure-provider1">
<option value="">Select a provider</option>
<option value="provider">Select Provider</option>
</select>
</div>
</div>
<div>
<div class="control form-group">
<a href="" data-toggle="modal" data-target="#procedureProvider1Modal" title="Press enter to add other diagnosis">Add Modifiers…</a>
<div class="modal fade" id="procedureProvider1Modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-backdrop">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" title="Press enter to close."><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="procedureProvider1Label">Add Modifiers</h4>
</div>
<div class="modal-body">
<div class="control form-group">
<div class="form-group" role="application">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default panel-w-list-group">
<div class="panel-heading">
Available Modifiers
</div>
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Modifier name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Modifier name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Modifier name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Modifier name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Modifier name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default panel-w-list-group">
<div class="panel-heading">
Selected Modifiers
</div>
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Selected name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Selected name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Selected name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Selected name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Selected name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" title="Press enter to cancel">Cancel</button>
<button type="button" class="btn btn-default" data-dismiss="modal" title="Press enter to add">Add</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="proceduresOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<div class="comment-box">
<div class="faux-table-container comments-container">
<div class="faux-table">
<div class="body">
<div class="table-row">
<div>
<span>The patient is lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 01/26/2015 08:12 - Vehu, Five</span>
</div>
<div>
<span>
<button type="button" class="btn btn-icon" title="Press enter to edit comment"><i class="fa fa-pencil"></i></button>
<button type="button" class="btn btn-icon" title="Press enter to delete comment"><i class="fa fa-trash"></i></button>
</span>
</div>
</div>
<div class="table-row">
<div>
<span>The patient is lorem ipsum dolor sit amet. 01/26/2015 08:12 - Vehu, Five</span>
</div>
<div>
<span>
<button type="button" class="btn btn-icon" title="Press enter to edit comment"><i class="fa fa-pencil"></i></button>
<button type="button" class="btn btn-icon" title="Press enter to delete comment"><i class="fa fa-trash"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<div class="form-group col-xs-8">
<label for="procedure-comment1" class="sr-only">Comment</label>
<input class="form-control" type="text" name="name" title="Please edit comment" placeholder="Add Comment…" id="procedure-comment1" />
<span class="help-block">60 characters remaining…</span>
<label for="procedure-comment11" class="sr-only hidden">Comment</label>
<input class="form-control input-sm hidden" type="text" name="name" title="Please enter in comment" placeholder="Add Comment…" id="procedure-comment11" />
<span class="help-block hidden">60 characters remaining…</span>
</div>
<div class="col-xs-4">
<div>
<div class="col-xs-6 hidden">
<button type="button" class="btn btn-default btn-sm" title="Press enter to cancel">Cancel</button>
</div>
<div class="col-xs-6 hidden">
<button type="button" class="btn btn-default btn-sm" title="Press enter to save comment">Save</button>
</div>
<div class="col-xs-12">
<button type="button" class="btn btn-default btn-block" title="Press enter to add comment">Add Comment</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-heading" role="tab" id="headingFour">
<div class="panel-title">
<div class="sr-only"><span>You are on an accordion heading. The accordion is collapsed. To expanded the accordion press enter on the accordion heading.</span></div>
<div>
<span>Item 67890 - modifier name, another modifier name, another…</span>
</div>
<div>
<a class="btn btn-icon" data-toggle="collapse" href="#proceduresTwo" aria-expanded="true" aria-controls="proceduresTwo" title="Press enter tp view comments"><i class="fa fa-file-text"></i></a>
</div>
<div>
<div class="control form-group">
<label for="quantity2" class="sr-only">Quanity</label>
<input class="form-control input-sm" type="text" title="Enter in numeric value" placeholder="1" id="quantity2" />
</div>
</div>
<div>
<div class="control form-group">
<label for="procedure-provider2" class="sr-only">Select Provider</label>
<select class="form-control input-sm" name="options" title="Use up and down arrow keys to view options and press enter to select" id="procedure-provider2">
<option value="">Select a provider</option>
<option value="provider">Select Provider</option>
</select>
</div>
</div>
<div>
<div class="control form-group">
<a href="" data-toggle="modal" data-target="#procedureProvider1Modal2" title="Press enter to add other diagnosis">Add Modifiers…</a>
<div class="modal fade" id="procedureProvider1Modal2" aria-hidden="true">
<div class="modal-dialog modal-dialog-backdrop">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" title="Press enter to close."><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="procedureProvider1Label2">Add Modifiers</h4>
</div>
<div class="modal-body">
<div class="control form-group">
<div class="form-group" role="application">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default panel-w-list-group">
<div class="panel-heading">
Available Modifiers
</div>
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Modifier name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Modifier name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Modifier name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Modifier name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Modifier name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default panel-w-list-group">
<div class="panel-heading">
Selected Modifiers
</div>
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Selected name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Selected name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Selected name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Selected name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-10">
Selected name
</div>
<div class="col-xs-2">
<button title="Press enter to add modifier" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" title="Press enter to cancel">Cancel</button>
<button type="button" class="btn btn-default" data-dismiss="modal" title="Press enter to add">Add</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="proceduresTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<div class="comment-box">
<div class="faux-table-container comments-container">
<div class="faux-table">
<div class="body">
<div class="table-row">
<div>
<span>The patient is lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 01/26/2015 08:12 - Vehu, Five</span>
</div>
<div>
<span>
<button type="button" class="btn btn-icon" title="Press enter to edit comment"><i class="fa fa-pencil"></i></button>
<button type="button" class="btn btn-icon" title="Press enter to delete comment"><i class="fa fa-trash"></i></button>
</span>
</div>
</div>
<div class="table-row">
<div>
<span>The patient is lorem ipsum dolor sit amet. 01/26/2015 08:12 - Vehu, Five</span>
</div>
<div>
<span>
<button type="button" class="btn btn-icon" title="Press enter to edit comment"><i class="fa fa-pencil"></i></button>
<button type="button" class="btn btn-icon" title="Press enter to delete comment"><i class="fa fa-trash"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<div class="form-group col-xs-8">
<label for="procedure-comment2" class="sr-only">Comment</label>
<input class="form-control" type="text" name="name" title="Please edit comment" placeholder="Add Comment…" id="procedure-comment2" />
<span class="help-block hidden">60 characters remaining…</span>
<label for="procedure-comment22" class="sr-only hidden">Comment</label>
<input class="form-control hidden" type="text" name="name" title="Please enter in comment" placeholder="Add Comment…" id="procedure-comment22" />
<span class="help-block hidden">60 characters remaining…</span>
</div>
<div class="col-xs-4">
<div>
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-block" title="Press enter to cancel">Cancel</button>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-block" title="Press enter to save comment">Save</button>
</div>
<div class="col-xs-12 hidden">
<button type="button" class="btn btn-default btn-block" title="Press enter to add comment">Add Comment</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Copy