title: Load more items based on filter logic
body: <p>Logic here.. </p>
  
  <ol>
  <li><p>On load div container have to show based on the li selected id. Li ID &amp; div ID have to match and show. Others will be hidden.</p></li>
  <li><p>On intial load, it have to show only 3 items (after filtered based ID). On click "load more" link.. it have to show further 6 on each click. Filter based on ID have to maintained.</p></li>
  </ol>
  
  <p>Thanks in advance for help!!</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="slist selected" id="ele1"&gt;&lt;a href="javascript:;"&gt;Element 1&lt;/a&gt;&lt;/li&gt;
    &lt;li class="slist" id="ele2"&gt;&lt;a href="javascript:;"&gt;Element 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;div class="cwrapper"&gt;
    &lt;div class="contentEle"&gt;
      &lt;div class="content ele1"&gt;
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
      &lt;/div&gt;
      &lt;div class="content ele2"&gt;
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a href="javascript:;" class="load-more"&gt;Load more&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$('.slist').each(function () {
  if($(this).hasClass('selected')) {
  $('.cwrapper .contentEle &gt; div.content').hide();
  var $postDiv = $('.' + $(this).attr('id')).size();
      var $divEle = 3;
      $('.' + $(this).attr('id'):lt('+$divEle+')).fadeIn(600);
      $('div.content:lt('+$divEle+')').show();
  
      $('.load-more').click(function () {
        $divEle = ($divEle + 6 &lt;= $postDiv) ? $divEle + 6 : $postDiv;
        $('.cwrapper .contentEle &gt; div.content:lt('+$divEle+')').show();
      });    
   }
  });
  </code></pre>