EE // 29183707

More/Less List Items

by ChrisStanyon

HTML

<div class="checks">
<ul>
 	<li>Scheduling</li>
 	<li>Daily Logs</li>
 	<li>To-Do's</li>
 	<li>Messaging</li>
 	<li>Client Portal</li>
    <li class="hidinglist">Photos, Videos and Documents</li>
    <li class="hidinglist">Time Clock</li>
    <li class="hidinglist">Load Management</li>
    <li class="hidinglist">Proposals</li>
    <li class="hidinglist">Comments</li>
    <li class="hidinglist">Owner Invoices</li>
    <li class="hidinglist">Estimating</li>
    <li class="hidinglist">Budget</li>
    <li class="hidinglist">Custom Branding</li>
    <li class="hidinglist">Sub Portal</li>
  <li class="hidinglist">QuickBooks Integration</li>
  <li class="na hidinglist">Selections</li>
  <li class="na hidinglist">Bills and Purchase Orders</li>
  <li class="na hidinglist">RFIs</li>
 	<li class="na">Warranties</li>
 	<li class="na">Surveys</li>
 	<li class="na">Bids</li>
 	<li class="na">Change Orders</li>
</ul>
</div>
<p id="all-features-core" class="see-all-features">See all features</p>
<p id="less-features-core" class="see-all-features">See less features</p>

CSS

.hidinglist, #less-features-core  { display:none; }

.see-all-features{
    color: #f2613c;
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}

JavaScript

$('#less-features-core, #all-features-core').click(function() {
	$('.hidinglist, #less-features-core, #all-features-core').toggle();
});