jQuery切换隐藏和切换显示

Question

I am trying to Load first 10 element.and remaining element show after click more . I am using stack overflow solution.you can see here . jQuery load first 3 elements, click "load more" to display next 5 elements . Now I am trying to do some changes. 1:I want show 10 element then view more tag. with tootle hide and show. 2:when load more button click then show all li element and after all li element loaded, Load more button changes as show less button and load more button hide.and when click show less. show less will be hide and load more button will be show.

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

jquery

$(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();
    });
});

css

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

Answer 1

same as below ^O^ :

 $(document).ready(function () { size_li = $("#myList li").size(); x=10; $('#myList li:lt('+x+')').show(); if (size_li > 10) { $('#loadMore').show(); } $('#loadMore').click(function () { $('#myList li, #showLess').show(); $(this).hide(); }); $('#showLess').click(function () { $('#showLess, #myList li').hide(); $('#loadMore, #myList li:lt('+x+')').show(); }); }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>