We help IT Professionals succeed at work.
Get Started

CSS jQuery  Show More/Less list help

Jon Imms
Jon Imms asked
on
22 Views
Last Modified: 2020-05-29
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
Comment
Watch Question
CERTIFIED EXPERT
Most Valuable Expert 2020
Most Valuable Expert 2018
Commented:
This problem has been solved!
Unlock 1 Answer and 5 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE