Avatar of Jon Imms
Jon Imms
Flag for United States of America asked on

CSS jQuery Show More/Less list help

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
CSSjQuery

Avatar of undefined
Last Comment
Chris Stanyon

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Chris Stanyon

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Jon Imms

ASKER
hey Chris,

One quick question on this,   I have it all working, but when i click the link, the see less features appears, but inline. how can i change it to block?   

/* == Expand list styling == */
.hidinglist, #less-features-core  { display:none; }
.hidinglist-pro, #less-features-pro  { display:none; }

.hidinglist, #all-features-core {display: block;}
.hidinglist-pro, #all-features-pro {display: block;}

.see-all-features{
        position: relative;
        padding-right: 18px;
        color: #f2613c;
        font-family: Avenir Medium,sans-serif;
        line-height: 1.1;
        white-space: nowrap;
        text-align: center;
        padding-left: 15px;
}

Open in new window

Chris Stanyon

Hey Jon,

Not sure what you mean. The screenshot you've shown looks like display:block to me.

Also, you're CSS looks a little odd - you're setting hidinglist to display:none and then setting it display:block.
Jon Imms

ASKER
Hey Chris,

I did a work around with margin-left to get it to display correctly,  But no idea why it changes from display:none to inline-block

/* == Expand list styling == */
.hidinglist, #less-features-core  { display:none; margin-left: 33%;}
.hidinglist-pro, #less-features-pro  { display:none; margin-left: 33%; }
#all-features-core {display: block;}
#all-features-pro {display: block;}

.see-all-features{
    position: relative;
    padding-right: 18px;
    color: #f2613c;
    font-family: Avenir Medium,sans-serif;
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
    padding-left: 15px;
    cursor: pointer;
}

Open in new window

Your help has saved me hundreds of hours of internet surfing.
fblack61
Chris Stanyon

Hey Jon,

There must be some other code at play here. As I've tested it - it just switches between display:block and display:none. I'm guessing your inline-block must be coming from somewhere else.