jquery toogle ausblenden und toggle show

Question

Ich versuche, die ersten 10 element.and restliche Element Show nach Klick mehr zu laden. Ich benutze Stack-Overflow-Lösung. Sie können hier sehen. jQuery load first 3 elements, click "load more" to display next 5 elements. Jetzt versuche ich einige Änderungen vorzunehmen. 1: Ich möchte zeigen 10 Element dann mehr Tag anzeigen. mit tootle verstecken und zeigen. 2: wenn laden mehr taste klicken dann zeigen alle li element und nach alle li element geladen, Laden mehr taste ändert als anzeigen weniger taste und laden mehr taste ausblenden. Und wenn klicken zeigen weniger. zeigen weniger wird auszublenden und mehr Button laden wird zeigen .Thanks

<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

selben wie unten^O^sein:

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