Using jQuery i want to show li five at a time when i click the show button
<p>Using jQuery, I want to show li five at a time when I click the show button.</p>

<p>here is my code:</p>

<pre><code>&lt;button class="show"&gt;show&lt;/button&gt;
&lt;ul&gt;
    &lt;li id="Li0"&gt;0&lt;/li&gt;
    &lt;li id="Li1"&gt;1&lt;/li&gt;
    &lt;li id="Li2"&gt;2&lt;/li&gt;
    &lt;li id="Li3"&gt;3&lt;/li&gt;
    &lt;li id="Li4"&gt;4&lt;/li&gt;
    &lt;li id="Li5"&gt;5&lt;/li&gt;
    &lt;li id="Li6"&gt;6&lt;/li&gt;
    &lt;li id="Li7"&gt;7&lt;/li&gt;
    &lt;li id="Li8"&gt;8&lt;/li&gt;
    &lt;li id="Li9"&gt;9&lt;/li&gt;
    &lt;li id="Li10"&gt;10&lt;/li&gt;
    &lt;li id="Li11"&gt;11&lt;/li&gt;
    &lt;li id="Li12"&gt;12&lt;/li&gt;
    &lt;li id="Li13"&gt;13&lt;/li&gt;
    &lt;li id="Li14"&gt;14&lt;/li&gt;
    &lt;li id="Li15"&gt;15&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The script is:</p>

<pre><code>$(".show").click(function(){
    $("ul &gt; li:lt(' + (index - 5) + ')+ ").addClass('active');
});
</code></pre>

<p>The css is:</p>

<pre><code>ul li{
    display:none;
}
.active{
    display:inline;
}
</code></pre>
