<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> <!------ Include the above in your HEAD tag ----------> <div class="container"> <!--Dropdown for choosing user type--> <div class="row" style="padding-bottom:20px;"> <div> <select id="selectViewType"> <option value="systemAdmin"> System Administrator </option> <option value="riskManager"> Risk Manager </option> <option value="eventManager"> Event Manager </option> <option value="departmentManager"> Department Manager </option> <option value="followupInvestigator"> Follow-up Investigator </option> <option value="reportAnalyst"> Report Analyst </option> </select> </div> </div> <div id="divAdminView" class="row"> <!--Sidebar Options--> <div class="col-md-3"> <div id="sidebar" class="well sidebar-nav"> <h5><i class="glyphicon glyphicon-user"></i> <small><b>PROFILE MANAGEMENT</b></small> </h5> <ul class="nav nav-pills nav-stacked"> <li id="liUserInfo" data-section="divUserInfo"><a href="#">User Information</a></li> <li id="liManageEmails" data-section="divManageEmails"><a href="#">Email Notifications</a></li> </ul> </div> </div> <!--Content for each sidebar option--> <div class="col-md-9"> <!--User Information--> <div id="divUserInfo" class="data-section"> <div class="panel panel-info"> <div class="panel-heading">First & Last Name</div> <div class="panel-body"> <table cellpadding="0" cellspacing="0" id="ctl00_qacContent_Table3"> <tbody> <tr> <td align="right"> <span id="ctl00_qacContent_lblFName">* First Name:</span> </td> <td align="left"> <input autocomplete="off" id="ctl00_qacContent_txtFName" name="ctl00$qacContent$txtFName" type="text" value="Kevin">   <span id="ctl00_qacContent_rfvFname" style="display:none;">Required</span> </td> </tr> <tr> <td align="right"> <span id="ctl00_qacContent_lblLName">* Last Name:</span> </td> <td align="left"> <input autocomplete="off" id="ctl00_qacContent_txtFName" name="ctl00$qacContent$txtFName" type="text" value="Robbins">   <span id="ctl00_qacContent_rfvFname" style="display:none;">Required</span> </td> </tr> </tbody> </table> </div> </div> <div class="panel panel-info"> <div class="panel-heading">Change your password</div> <div class="panel-body"> <table cellpadding="0" cellspacing="0" id="ctl00_qacContent_Table3"> <tbody> <tr> <td align="right"> <span id="ctl00_qacContent_lblFName">* Old Password:</span> </td> <td align="left"> <input autocomplete="off" id="ctl00_qacContent_txtFName" name="ctl00$qacContent$txtFName" type="password" value="Welcome1"> </td> </tr> <tr> <td align="right"> <span id="ctl00_qacContent_lblLName">New Password:</span> </td> <td align="left"> <input autocomplete="off" id="ctl00_qacContent_txtFName" name="ctl00$qacContent$txtFName" type="password" value=""> </td> </tr> <tr> <td align="right"> <span id="ctl00_qacContent_lblLName">Confirm Password:</span> </td> <td align="left"> <input autocomplete="off" id="ctl00_qacContent_txtFName" name="ctl00$qacContent$txtFName" type="password" value=""> </td> </tr> </tbody> </table> </div> </div> <div class="panel panel-info"> <div class="panel-heading">Contact information</div> <div class="panel-body"> <table cellpadding="0" cellspacing="0" id="ctl00_qacContent_Table3"> <tbody> <tr> <td align="right"> <span id="ctl00_qacContent_lblFName">* Phone Number:</span> </td> <td align="left"> <input autocomplete="off" id="ctl00_qacContent_txtFName" name="ctl00$qacContent$txtFName" type="text" value="(555)555-5555">   <span id="ctl00_qacContent_rfvFname" style="display:none;">Required</span> </td> </tr> <tr> <td align="right"> <span id="ctl00_qacContent_lblLName">* Email:</span> </td> <td align="left"> <input autocomplete="off" id="ctl00_qacContent_txtFName" name="ctl00$qacContent$txtFName" type="text" value="test@test.com">   <span id="ctl00_qacContent_rfvFname" style="display:none;">Required</span> </td> </tr> </tbody> </table> </div> </div> <div class="panel panel-info"> <div class="panel-heading">Security question & answer</div> <div class="panel-body"> <table cellpadding="0" cellspacing="0" id="ctl00_qacContent_Table3"> <tbody> <tr> <td align="right"> <span id="ctl00_qacContent_lblFName">* First Name:</span> </td> <td align="left"> <select id="ctl00_qacContent_drplstQuestions" name="ctl00$qacContent$drplstQuestions"> <option value="1"> What is your mother's maiden name? </option> <option value="2"> What year were you born? </option> <option selected="selected" value="3"> What is your favorite color? </option> <option value="4"> What city were you born in? </option> <option value="5"> What is your favorite car? </option> <option value="6"> What is the name of your first pet? </option> </select> </td> </tr> <tr> <td align="right"> <span id="ctl00_qacContent_lblLName">* Answer:</span> </td> <td align="left"> <input autocomplete="off" id="ctl00_qacContent_txtFName" name="ctl00$qacContent$txtFName" type="text" value="Blue">   <span id="ctl00_qacContent_rfvFname" style="display:none;">Required</span> </td> </tr> </tbody> </table> </div> </div> </div> <!--Manage Emails--> <div id="divManageEmails" class="data-section"> <div class="table-responsive"> <table class="table table-bordred table-striped" id="mytable"> <thead> <tr> <th> <input id="checkall" type="checkbox"> </th> <th> Notification Type </th> <th> Description </th> <th> Status </th> <th> Edit </th> <th> Delete </th> </tr> </thead> <tbody> <tr class="notification-type-row followup-past-due-seven-days"> <td> <input class="checkthis" type="checkbox" checked> </td> <td> Past-Due Follow-Up 7 days </td> <td> Backend: Auto notification sent when SIR form is 7 days beyond assigned due date. </td> <td> Enabled (All) </td> <td> <p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary btn-xs" data-target="#edit" data-title="Edit" data-toggle="modal"><span class="glyphicon glyphicon-pencil"></span></button> </p> </td> <td> <p data-placement="top" data-toggle="tooltip" title="Delete"> <button class="btn btn-danger btn-xs" data-target="#delete" data-title="Delete" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span></button> </p> </td> </tr> <tr class="notification-type-row followup-past-due-thirty-days"> <td> <input class="checkthis" type="checkbox" checked> </td> <td> Past-Due Follow-Up 30 days </td> <td> Backend: Auto notification sent when SIR form is 30 days beyond assigned due date. </td> <td> Enabled (All) </td> <td> <p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary btn-xs" data-target="#edit" data-title="Edit" data-toggle="modal"><span class="glyphicon glyphicon-pencil"></span></button> </p> </td> <td> <p data-placement="top" data-toggle="tooltip" title="Delete"> <button class="btn btn-danger btn-xs" data-target="#delete" data-title="Delete" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span></button> </p> </td> </tr> <tr class="notification-type-row event-share"> <td> <input class="checkthis" type="checkbox" checked> </td> <td> Event Share </td> <td> Manage This Event Page: Utilize "Sharing..." feature. </td> <td> Enabled (All) </td> <td> <p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary btn-xs" data-target="#edit" data-title="Edit" data-toggle="modal"><span class="glyphicon glyphicon-pencil"></span></button> </p> </td> <td> <p data-placement="top" data-toggle="tooltip" title="Delete"> <button class="btn btn-danger btn-xs" data-target="#delete" data-title="Delete" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span></button> </p> </td> </tr> <tr class="notification-type-row event-new-comment"> <td> <input class="checkthis" type="checkbox" checked> </td> <td> Event New Comment </td> <td> Manage This Event Page: Click "Comment" button and "Add". </td> <td> Enabled (All) </td> <td> <p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary btn-xs" data-target="#edit" data-title="Edit" data-toggle="modal"><span class="glyphicon glyphicon-pencil"></span></button> </p> </td> <td> <p data-placement="top" data-toggle="tooltip" title="Delete"> <button class="btn btn-danger btn-xs" data-target="#delete" data-title="Delete" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span></button> </p> </td> </tr> <tr class="notification-type-row event-edit-comment"> <td> <input class="checkthis" type="checkbox" checked> </td> <td> Event Edit Comment </td> <td> Manage This Event Page: Click "Edit" icon on existing comment and "Add". </td> <td> Enabled (All) </td> <td> <p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary btn-xs" data-target="#edit" data-title="Edit" data-toggle="modal"><span class="glyphicon glyphicon-pencil"></span></button> </p> </td> <td> <p data-placement="top" data-toggle="tooltip" title="Delete"> <button class="btn btn-danger btn-xs" data-target="#delete" data-title="Delete" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span></button> </p> </td> </tr> </tbody> </table> <div class="clearfix"> </div> </div> </div> </div> </div> </div> <div id="divPanelView" class="container"> <h4>Manage Email Notifications</h4> <div class="row notification-type systemAdmin"> <div class="col-md-12"> <div class="panel panel-success"> <div class="panel-heading clickable"> <h3 class="panel-title"> Event Created </h3> <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span> </div> <div class="panel-body"> <div class="form-group col-xs-3"> <label for="enable-event-created" class="control-label text-right">Enable email notifications?</label> <div> <div class="input-group"> <div id="radioBtn" class="btn-group"> <a class="btn btn-primary btn-sm active" data-toggle="enable-event-created" data-title="Y">YES</a> <a class="btn btn-primary btn-sm notActive" data-toggle="enable-event-created" data-title="N">NO</a> </div> <input type="hidden" name="enable-event-created" id="enable-event-created"> </div> </div> </div> </div> </div> </div> </div> <div class="row notification-type systemAdmin"> <div class="col-md-12"> <div class="panel panel-success"> <div class="panel-heading clickable"> <h3 class="panel-title"> Follow-Up Assigned </h3> <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span> </div> <div class="panel-body"> <div class="form-group col-xs-3"> <label for="enable-followup-assigned" class="control-label text-right">Enable email notifications?</label> <div> <div class="input-group"> <div id="radioBtn" class="btn-group"> <a class="btn btn-primary btn-sm active" data-toggle="enable-followup-assigned" data-title="Y">YES</a> <a class="btn btn-primary btn-sm notActive" data-toggle="enable-followup-assigned" data-title="N">NO</a> </div> <input type="hidden" name="enable-followup-assigned" id="enable-followup-assigned"> </div> </div> </div> </div> </div> </div> </div> <div class="row notification-type systemAdmin"> <div class="col-md-12"> <div class="panel panel-success"> <div class="panel-heading clickable"> <h3 class="panel-title"> Past-Due Follow-Up 1 day </h3> <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span> </div> <div class="panel-body"> <div class="form-group col-xs-3"> <label for="enable-past-due-followup-one-day" class="control-label text-right">Enable email notifications?</label> <div> <div class="input-group"> <div id="radioBtn" class="btn-group"> <a class="btn btn-primary btn-sm active" data-toggle="enable-past-due-followup-one-day" data-title="Y">YES</a> <a class="btn btn-primary btn-sm notActive" data-toggle="enable-past-due-followup-one-day" data-title="N">NO</a> </div> <input type="hidden" name="enable-past-due-followup-one-day" id="enable-past-due-followup-one-day"> </div> </div> </div> </div> </div> </div> </div> <div class="row notification-type systemAdmin riskManager eventManager departmentManager"> <div class="col-md-12"> <div class="panel panel-success"> <div class="panel-heading clickable"> <h3 class="panel-title"> Past-Due Follow-Up 7 days </h3> <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span> </div> <div class="panel-body"> <div class="form-group col-xs-3"> <label for="enable-past-due-followup-seven-days" class="control-label text-right">Enable email notifications?</label> <div> <div class="input-group"> <div id="radioBtn" class="btn-group"> <a class="btn btn-primary btn-sm active" data-toggle="enable-past-due-followup-seven-days" data-title="Y">YES</a> <a class="btn btn-primary btn-sm notActive" data-toggle="enable-past-due-followup-seven-days" data-title="N">NO</a> </div> <input type="hidden" name="enable-past-due-followup-seven-days" id="enable-past-due-followup-seven-days"> </div> </div> </div> <div class="col-xs-4 event-types"> <h4 class="text-center">Event Types</h4> <div class="well" style="max-height: 300px;overflow: auto;"> <ul class="list-group checked-list-box"> <li class="list-group-item" data-checked="true">Blood or Blood Product</li> <li class="list-group-item">Device or Medical/Surgical Supply</li> <li class="list-group-item">Fall</li> <li class="list-group-item">Healthcare-associated Infection</li> <li class="list-group-item" data-checked="true">Medication or Other Substance</li> <li class="list-group-item">Perinatal</li> <li class="list-group-item">Pressure Ulcer</li> <li class="list-group-item">Surgery or Anesthesia</li> <li class="list-group-item">Other</li> <li class="list-group-item">Emergency Code</li> </ul> </div> </div> <div class="col-xs-4 departments"> <h4 class="text-center">Departments</h4> <div class="well" style="max-height: 300px;overflow: auto;"> <ul class="list-group checked-list-box"> <li class="list-group-item">Department 1</li> <li class="list-group-item" data-checked="true">Department 2</li> <li class="list-group-item">Department 3</li> <li class="list-group-item">Department 4</li> <li class="list-group-item">Department 5</li> <li class="list-group-item">Department 6</li> <li class="list-group-item">Department 7</li> <li class="list-group-item">Department 8</li> <li class="list-group-item">Department 9</li> <li class="list-group-item">Department 10</li> </ul> </div> </div> </div> </div> </div> </div> <div class="row notification-type systemAdmin riskManager eventManager departmentManager"> <div class="col-md-12"> <div class="panel panel-success"> <div class="panel-heading clickable"> <h3 class="panel-title"> Past-Due Follow-Up 30 days </h3> <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span> </div> <div class="panel-body"> <div class="form-group col-xs-3"> <label for="enable-past-due-followup-thirty-days" class="control-label text-right">Enable email notifications?</label> <div> <div class="input-group"> <div id="radioBtn" class="btn-group"> <a class="btn btn-primary btn-sm active" data-toggle="enable-past-due-followup-thirty-days" data-title="Y">YES</a> <a class="btn btn-primary btn-sm notActive" data-toggle="enable-past-due-followup-thirty-days" data-title="N">NO</a> </div> <input type="hidden" name="enable-past-due-followup-thirty-days" id="enable-past-due-followup-thirty-days"> </div> </div> </div> </div> </div> </div> </div> <div class="row notification-type systemAdmin riskManager eventManager departmentManager"> <div class="col-md-12"> <div class="panel panel-success"> <div class="panel-heading clickable"> <h3 class="panel-title"> Event Share </h3> <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span> </div> <div class="panel-body"> <div class="form-group col-xs-3"> <label for="enable-event-share" class="control-label text-right">Enable email notifications?</label> <div> <div class="input-group"> <div id="radioBtn" class="btn-group"> <a class="btn btn-primary btn-sm active" data-toggle="enable-event-share" data-title="Y">YES</a> <a class="btn btn-primary btn-sm notActive" data-toggle="enable-event-share" data-title="N">NO</a> </div> <input type="hidden" name="enable-event-share" id="enable-event-share"> </div> </div> </div> </div> </div> </div> </div> <div class="row notification-type systemAdmin riskManager eventManager departmentManager"> <div class="col-md-12"> <div class="panel panel-success"> <div class="panel-heading clickable"> <h3 class="panel-title"> Event New Comment </h3> <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span> </div> <div class="panel-body"> <div class="form-group col-xs-3"> <label for="enable-event-new-comment" class="control-label text-right">Enable email notifications?</label> <div> <div class="input-group"> <div id="radioBtn" class="btn-group"> <a class="btn btn-primary btn-sm active" data-toggle="enable-event-new-comment" data-title="Y">YES</a> <a class="btn btn-primary btn-sm notActive" data-toggle="enable-event-new-comment" data-title="N">NO</a> </div> <input type="hidden" name="enable-event-new-comment" id="enable-event-new-comment"> </div> </div> </div> </div> </div> </div> </div> <div class="row notification-type systemAdmin riskManager eventManager departmentManager"> <div class="col-md-12"> <div class="panel panel-success"> <div class="panel-heading clickable"> <h3 class="panel-title"> Event Edit Comment </h3> <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span> </div> <div class="panel-body"> <div class="form-group col-xs-3"> <label for="enable-event-edit-comment" class="control-label text-right">Enable email notifications?</label> <div> <div class="input-group"> <div id="radioBtn" class="btn-group"> <a class="btn btn-primary btn-sm active" data-toggle="enable-event-edit-comment" data-title="Y">YES</a> <a class="btn btn-primary btn-sm notActive" data-toggle="enable-event-edit-comment" data-title="N">NO</a> </div> <input type="hidden" name="enable-event-edit-comment" id="enable-event-edit-comment"> </div> </div> </div> </div> </div> </div> </div> </div>

.clickable { cursor: pointer; } .clickable .glyphicon { background: rgba(0, 0, 0, 0.15); display: inline-block; padding: 6px 12px; border-radius: 4px } .panel-heading span { margin-top: -23px; font-size: 15px; margin-right: -9px; } a.clickable { color: inherit; } a.clickable:hover { text-decoration:none; } #radioBtn .notActive{ color: #3276b1; background-color: #fff; } /* CSS REQUIRED */ .state-icon { left: -5px; } .list-group-item-primary { color: rgb(255, 255, 255); background-color: rgb(66, 139, 202); } /* DEMO ONLY - REMOVES UNWANTED MARGIN */ .well .list-group { margin-bottom: 0px; }

$(document).ready(function() { $('#divAdminView').hide(); //var userType = 'systemAdmin'; var userType = 'riskManager'; //var userType = 'eventManager'; //var userType = 'departmentManager'; //var userType = 'followupInvestigator'; //var userType = 'reportAnalyst'; $('#selectViewType').find('option[value="' + userType + '"]').attr('selected', 'selected'); var theSelectedValue = $(this).find('option:selected').val(); $('div.row.notification-type').not('.' + theSelectedValue).hide(); $('div.row.notification-type.' + theSelectedValue).show(); $('ul.nav-stacked li:eq(1)').addClass('active'); $('#divUserInfo').hide(); $('#divManageEmails').show(); $(document).on('click', 'ul.nav-stacked li', function() { $('ul.nav-stacked li').removeClass('active'); $(this).addClass('active'); $('.data-section').hide(); var sectionToShow2 = $(this).attr('data-section'); $('#' + sectionToShow2).show(); }); $(document).on('change', '#selectViewType', function() { var theSelectedValue = $(this).find('option:selected').val(); $('div.row.notification-type').not('.' + theSelectedValue).hide(); $('div.row.notification-type.' + theSelectedValue).show(); switch(theSelectedValue) { case 'systemAdmin': //do stuff break; case 'riskManager': $('li[data-section="divManageEmails"]').show(); $('#divManageEmails').show(); break; case 'eventManager': //do stuff break; case 'departmentManager': //do stuff break; case 'followupInvestigator': $('li[data-section="divManageEmails"]').hide(); $('#divManageEmails').hide(); $('#liUserInfo').trigger('click'); break; case 'reportAnalyst': //do stuff break; default: //do stuff } }); $('#radioBtn a').on('click', function(){ var sel = $(this).data('title'); var tog = $(this).data('toggle'); $('#'+tog).prop('value', sel); $('a[data-toggle="'+tog+'"]').not('[data-title="'+sel+'"]').removeClass('active').addClass('notActive'); $('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active'); if (sel == 'Y') { $(this).closest('div.notification-type').find('div.event-types, div.departments').show(); //$(this).closest('div.notification-type').find('div.event-types, div.departments').removeClass('disabled'); $(this).closest('div.notification-type').find('div.panel').removeClass('panel-danger').addClass('panel-success'); } else { $(this).closest('div.notification-type').find('div.event-types, div.departments').hide(); //$(this).closest('div.notification-type').find('div.event-types, div.departments').addClass('disabled'); $(this).closest('div.notification-type').find('div.panel').removeClass('panel-success').addClass('panel-danger'); } }); }); $(document).on('click', '.panel-heading span.clickable', function (e) { var $this = $(this); if (!$this.hasClass('panel-collapsed')) { $this.parents('.panel').find('.panel-body').slideUp(); $this.addClass('panel-collapsed'); $this.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus'); } else { $this.parents('.panel').find('.panel-body').slideDown(); $this.removeClass('panel-collapsed'); $this.find('i').removeClass('glyphicon-plus').addClass('glyphicon-minus'); } }); $(document).on('click', '.panel div.clickable', function (e) { var $this = $(this); if (!$this.hasClass('panel-collapsed')) { $this.parents('.panel').find('.panel-body').slideUp(); $this.addClass('panel-collapsed'); $this.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus'); } else { $this.parents('.panel').find('.panel-body').slideDown(); $this.removeClass('panel-collapsed'); $this.find('i').removeClass('glyphicon-plus').addClass('glyphicon-minus'); } }); $(document).ready(function () { $('.panel-heading span.clickable').click(); $('.panel div.clickable').click(); }); $(function () { $('.list-group.checked-list-box .list-group-item').each(function () { // Settings var $widget = $(this), $checkbox = $('<input type="checkbox" class="hidden" />'), color = ($widget.data('color') ? $widget.data('color') : "primary"), style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"), settings = { on: { icon: 'glyphicon glyphicon-check' }, off: { icon: 'glyphicon glyphicon-unchecked' } }; $widget.css('cursor', 'pointer') $widget.append($checkbox); // Event Handlers $widget.on('click', function () { $checkbox.prop('checked', !$checkbox.is(':checked')); $checkbox.triggerHandler('change'); updateDisplay(); }); $checkbox.on('change', function () { updateDisplay(); }); // Actions function updateDisplay() { var isChecked = $checkbox.is(':checked'); // Set the button's state $widget.data('state', (isChecked) ? "on" : "off"); // Set the button's icon $widget.find('.state-icon') .removeClass() .addClass('state-icon ' + settings[$widget.data('state')].icon); // Update the button's color if (isChecked) { $widget.addClass(style + color + ' active'); } else { $widget.removeClass(style + color + ' active'); } } // Initialization function init() { if ($widget.data('checked') == true) { $checkbox.prop('checked', !$checkbox.is(':checked')); } updateDisplay(); // Inject the icon if applicable if ($widget.find('.state-icon').length == 0) { $widget.prepend('<span class="state-icon ' + settings[$widget.data('state')].icon + '"></span>'); } } init(); }); $('#get-checked-data').on('click', function(event) { event.preventDefault(); var checkedItems = {}, counter = 0; $("#check-list-box li.active").each(function(idx, li) { checkedItems[counter] = $(li).text(); counter++; }); $('#display-json').html(JSON.stringify(checkedItems, null, '\t')); }); });