Jquery display Div li child items onclick - php

Question

In jquery, I need to dynamically display first two values and after while click remaining values should be display?
<div class="category_items">
<div class="category_item">
<div class="test">test1_1</div>
<div class="test">test1_2</div>
<div class="test">test1_3</div>
<div class="test">test1_4</div>
<div class="test">test1_5</div>
<div class="test">test1_6</div>
</div>
<button>Show / Hide</button>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<script>
var elems = $('.category_item', '.category_items').filter(function() {
return $(this).children().length > 2;
}).hide();
$('button').on('click', function() {
elems.toggle();
});
</script>
I want to display first two items by default when i click the button i want show full list

Answer 1

Do this with css with
HTML
<style>
li div{display:none;}
li:hover div {display:block;position:absolute;left:200px;width:100px;height:100px;background-color:red;}
</style>
<ul>
<li>123<div>1</div></li>
<li>222<div>2</div></li>
<li>333<div>3</div></li>
</ul>
enter code here

Answer 2

:gt selector will be good for this situation. I hope, this code helps you.
<script>
$('.category_item .test:gt(1)').hide();
$('button').on('click', function() {
$('.category_item .test:gt(1)').toggle();
});
</script>
If you want to change the number of elements which you want to show, just change number in gt() selector.

Answer 3

See this also but I not sure if is normal to use span as child of ul not li but you can put in last li another ul and when show this new ul.
This all li is show when zou hover ul bu zou can do to show all li onli when hove some think one as example + hover last show li(user no need to click to see al!).
<style>
ul span{display:none;}
ul:hover span {display:block;/*position:absolute;left:200px;background-color:red;*/}
</style>
<ul>
<li>123<div>1</div></li>
<li>22<div>2</div></li>
<span>
<li>223<div>3</div></li>
<li>223<div>3</div></li>
<li>223<div>3</div></li>
</span>
</ul>