show div and less div

by sunil puvvada

HTML

<div class="standfordca">
content
</div>
<div class="standfordca">
content
</div>
<div class="standfordca">
content
</div>
<div class="standfordca">
content
</div>
<div class="standfordca">
content
</div>
<span class="cced_loadmore">more</span>
<span class="cced_less" style="display:none;">less</span>

CSS

.standfordca{
  display:none;
}
.cced_loadmore{
  cursor:pointer;
  text-decoration:underline;
  font-weight:800;
  font-size:20px;
}
.cced_less{
  cursor:pointer;
  text-decoration:underline;
  font-weight:800;
  font-size:20px;
}

JavaScript

$(".standfordca").slice(0, 2).show();
                 $(".cced_loadmore").on('click', function(e) {
                     e.preventDefault();
                     $(".standfordca:hidden").slice(0, 5).slideDown();
                        if ($(".standfordca:hidden").length == 0) {
                            $("#load").fadeOut('slow');
                        }
                       $(".cced_less").show();
                        $(".cced_loadmore").hide();
                       
                    });
                    // less code using slice
                    $(".cced_less").on('click', function(e) {
                        e.preventDefault();
                        $(".standfordca:visible").slice(2, 5).slideUp();
                       if ($(".standfordca:visible").length == 2) {
                           $("#load").fadeIn('slow');
                       }
                     $(".cced_loadmore").show();
                     $(".cced_less").hide();
                   });