How to apply fade in out effect to "Load more" "Show Less" Javascript

Question

Need to apply fade in & out effect to Load more & Show less button function.

Code from: https://jsfiddle.net/cse_tushar/6FzSb/

Apply effect like: https://codepen.io/elmahdim/pen/sGkvH

Thanks in advance.............

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });
});

#myList li{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
}
#showLess:hover {
    color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty one</li>
    <li>Twenty two</li>
    <li>Twenty three</li>
    <li>Twenty four</li>
    <li>Twenty five</li>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

You've linked to a working example that does what you want with only a small amount of code. Have you not tried code like in that example, using `.slideDown()`, etc.? — nnnnnn, Mar 04 '17 at 05:52
This may help you further http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load — kvn, Mar 04 '17 at 05:59
No "Show Less" button in the sample codepen link.. that's the problem. — vishnu, Mar 04 '17 at 06:06

kvn · Accepted Answer · 2017-03-04T11:22:10.007

1

Add opacity transition to your li tags

#myList li{ 
   height: 0;
   opacity: 0;
   transition: all 0.4s ease;
   overflow: hidden;
}

#myList li.show {
   height: 18px;
   opacity: 1;
}

This will create fade-in/fade-out effect as you add/remove show class to your li.

Here is the updated fiddle. - https://jsfiddle.net/6FzSb/4138/

edited Mar 04 '17 at 11:22

answered Mar 04 '17 at 05:58

kvn

2,210
5
20
47

is it possible with display:none; & display:block; function? – vishnu Mar 04 '17 at 06:49
display:none; removes a block from the page as if it were never there. A block cannot be partially displayed; it’s either there or it’s not. The same is true for visibility; you can’t expect a block to be half hidden which, by definition, would be visible! Fortunately, you can use opacity for fading effects instead. – Sivadass N Mar 04 '17 at 10:18

How to apply fade in out effect to "Load more" "Show Less" Javascript

1 Answers1