troubleshooting Question

CSS jQuery Show More/Less list help

Avatar of Jon Imms
Jon ImmsFlag for United States of America asked on
CSSjQuery
5 Comments1 Solution23 ViewsLast Modified:
Hello,  I need a little help finishing off a JQuery function, which will show or hide list items when you click on a link.

I'm almost there, but it's messed up on page load, and not sure how to modify the function.

-- On page load, it is showing the full list, and both links See more/See Less features.

-- When you click the See all features link, it shows the full list, and hides the show all features link. So this is working.

-- When you click the See less features, it hides the extra list items, and the show less features link. So this is working.

So, just have to figure out the on page load part to get this working.

<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>

Open in new window


jQuery(document).ready(function( $ ) {
    $('#all-features-core').click(function(){
        $('#all-features-core').css('display','none');
        $('.hidinglist').css('display','block');    
        $('#less-features-core').css('display','block');    
    });
                 
    $('#less-features-core').click(function(){
        $('#less-features-core').css('display','none');
        $('.hidinglist').css('display','none');
        $('#all-features-core').css('display','block');    
    });
});

Open in new window


This is how the list looks on page load.This is what it should look like when clicking see all featuresThis is what it should look like on page load, and when click show less features
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros