Description: Multi-Select Lists allow the user to select multiple list items.
508 Guidelines: A multi-select list is built using list items and in order to pass 508, you must wrap all content within the list item with an anchor tag to make each item keyboard accessible.
<div class="panel-body multi-select-list">
<ul class="list-borders">
<li>
<a href="#li-item">
<div class="col-xs-12">Selectable List Item 1</div>
</a>
</li>
<li>
<a href="#li-item">
<div class="col-xs-12">Selectable List Item 2</div>
</a>
</li>
<li>
<a href="#li-item">
<div class="col-xs-12">Selectable List Item 3</div>
</a>
</li>
</ul>
</div>
Copy
$(function() {
$('.multi-select-list').on('click', 'li', function() {
$(this).toggleClass('list-item-selected');
});
});