Show only first 5 divs accross multiple columns with show more button using JQuery
<p>How do I use JQuery to only show the first 5 times on each column &amp; a "more" &amp; "less" link to show more results.</p>

<p>What I am after at is similar to <a href="http://stackoverflow.com/questions/5050996/hide-all-li-elements-and-show-the-first-2-and-toggle-them-by-button">hide all li elements and show the first 2 and toggle them by button</a> - BUT I need the more &amp; less links to show/hide all the time slots for each doctor (ie: the more/less links should show/hide all the times over the 7 columns for each doctor with one click).</p>

<p>--THIS IS WHAT THE TIMES CURRENTLY LOOK LIKE--</p>

<p><img src="http://i.stack.imgur.com/SLsix.png" alt=""></p>

<p>--THIS IS THE RESULTS THAT I AM LOOKING FOR--</p>

<p><img src="http://i.stack.imgur.com/spUix.png" alt=""></p>

<p>--MY HTML CODE--</p>

<pre><code>&lt;div class="appointmentDetails"&gt;
  &lt;div class="staffInfo"&gt;
    &lt;div&gt;Dr John Doe&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="appointmentInfo"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;div&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="timeSlots bg"&gt;
        &lt;div&gt;&lt;a href="#"&gt;08:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;09:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;10:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;11:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;12:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;13:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;14:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;15:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;16:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;17:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;18:00&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="timeSlots"&gt;
        &lt;div&gt;&lt;a href="#"&gt;08:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;09:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;10:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;11:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;12:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;13:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;14:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;15:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;16:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;17:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;18:00&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="timeSlots bg"&gt;
        &lt;div&gt;&lt;a href="#"&gt;08:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;09:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;10:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;11:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;12:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;13:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;14:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;15:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;16:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;17:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;18:00&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="timeSlots"&gt;
        &lt;div&gt;&lt;a href="#"&gt;08:00&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="timeSlots bg"&gt;
        &lt;div&gt;&lt;a href="#"&gt;09:00&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="timeSlots"&gt;
        &lt;div&gt;&lt;a href="#"&gt;09:00&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="timeSlots bg"&gt;
        &lt;div&gt;&lt;a href="#"&gt;08:00&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div&gt;&lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="appointmentDetails"&gt;
  &lt;div class="staffInfo"&gt;
    &lt;div&gt;Dr Tom Smith&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="appointmentInfo"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;div&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="timeSlots bg"&gt;
        &lt;div&gt;&lt;a href="#"&gt;08:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;09:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;10:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;11:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;12:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;13:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;14:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;15:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;16:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;17:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;18:00&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="timeSlots"&gt;
        &lt;div&gt;&lt;a href="#"&gt;08:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;09:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;10:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;11:00&lt;/a&gt;&lt;/div&gt;
        &lt;div&gt;&lt;a href="#"&gt;12:00&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="timeSlots bg"&gt;
        &lt;div&gt;&lt;a href="#"&gt;10:00&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="timeSlots"&gt;
        &lt;div&gt;&lt;a href="#"&gt;10:00&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="timeSlots bg"&gt;
        &lt;div&gt;&lt;a href="#"&gt;10:00&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="timeSlots"&gt;
        &lt;div&gt;&lt;a href="#"&gt;10:00&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="timeSlots bg"&gt;
        &lt;div&gt;&lt;a href="#"&gt;10:00&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div&gt;&lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>--HERE IS A LIVE DEMO OF MY HTML/JAVASCRIPT/CSS--</p>

<p><a href="http://jsfiddle.net/rR26n/">http://jsfiddle.net/rR26n/</a></p>
