[Solved] See more and less button [closed]


Hope following code will help you.

$(document).ready(function() {
  var list = $(".partners__ul li");
  var numToShow = 4;
  var button = $(".partners__button__a");
  var numInList = list.length;
  var isShowing = true;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    if(isShowing){
      list.slice(showing - 1, showing + numToShow).fadeIn(100,onFadeComplete);
    }
    else{
      list.slice(showing - numToShow, numInList).fadeOut(100,onFadeComplete);
    }
    
    
  });
  
  function onFadeComplete(){
    var nowShowing = list.filter(':visible').length;
   
    if(nowShowing == numInList && isShowing){
        isShowing = false;
        button.text("Show less");  
    }
    else if(isShowing){
        button.text("Show even more");
    }
    
    if(nowShowing == numToShow){
      button.text("Show more");
      isShowing = true;
    }  
    
  }
});
.partners__ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.partners__ul li {
  position: relative;
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul class="partners__ul">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
  </ul>
  <button class="partners__button__a">Show More</button>
</div>

2

solved See more and less button [closed]