super simplistic example: https://codepen.io/tugbucket/pen/eYrMwKO
<ul>
<li>Apple</li>
<li>Watermelon</li>
<li>Orange</li>
<li>Pear</li>
<li>Strawberry</li>
<li>Grape</li>
<li>Plum</li>
<li>Mango</li>
<li>Blueberry</li>
<li>Papaya</li>
<li>Apricot</li>
<li>Mandarin</li>
<li>Banana</li>
<li>Grapefruit</li>
<li>Lemon</li>
<li>Lime</li>
<li>Pineapple</li>
<li>Jackfruit</li>
<li>Melon</li>
<li>Coconut</li>
<li>Avocado</li>
<li>Peach</li>
<li>Kiwi</li>
<li>Blackcurrant</li>
<li>Blackberry</li>
<li>Cherry</li>
<li>Fig</li>
<li>Lychee</li>
<li>Nectarine</li>
<li>Passionfruit</li>
<li>Quince</li>
<li>Raspberry</li>
<li>Tangerine</li>
<li>Pomegranate</li>
<li>Mulberry</li>
<li>Starfruit (US)/ Carambola (UK)</li>
<li>Guava</li>
<li>Pomelo</li>
<li>Cranberry</li>
<li>Tamarillo</li>
<li>Curuba</li>
<li>Soursop</li>
<li>Uchuva</li>
<li>Melon Cantaloupe</li>
<li>Granadilla</li>
<li>Durian</li>
<li>Dragon Fruit</li>
<li>Rambutan</li>
<li>Rose Apple</li>
<li>Star Apple</li>
<li>Tamarind</li>
<li>Persimmon</li>
<li>Mangosteen</li>
<li>Amla</li>
</ul>
var count = $('ul li').length;
$('ul').find('li:gt(10)').hide().end().append($('<li class="showMore">Show All <span>' + count + '</span> Items</li>').click(function(){
$(this).siblings(':hidden').show().end().remove();
})
);