title: jQuery show first X elements with More and Less links
body: <p>I am trying to find a jQuery solution to show the first 3 items on each menu in a left-hand navigation filter with a 'Show more' and 'Show less' link enabling users to expand the list.</p>
  
  <p>I have searched for a solution but most expand/collapse scripts completley hide the layer whilst others show an Expand (Show more) link but do not toggle to show a Collapse (Show less) link.</p>
  
  <p>My menus are coded as follows.</p>
  
  <pre><code>&lt;div id="menu1"&gt;
  &lt;ul class="term-list"&gt;
  &lt;li class="term-item "&gt;Item 1&lt;/li&gt;
  &lt;li class="term-item "&gt;Item 2&lt;/li&gt;
  &lt;li class="term-item "&gt;Item 3&lt;/li&gt;
  &lt;li class="term-item "&gt;Item 4&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="menu2"&gt;
  &lt;ul class="term-list"&gt;
  &lt;li class="term-item "&gt;Item 1&lt;/li&gt;
  &lt;li class="term-item "&gt;Item 2&lt;/li&gt;
  &lt;li class="term-item "&gt;Item 3&lt;/li&gt;
  &lt;li class="term-item "&gt;Item 4&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>