See more and see less button

Question

Here's a script that shows 4 items each time a button is clicked. What i need is to change the text of the button after a click to "show even more" and then change to "show less" at the end when all items shown. I tried to add this:

if (nowShowing >= numInList) {
  $('.partners__button__a').toggle(function() {
      $(this).text('Show More');
    }, function() {
      $(this).text('Show Less');
        button.show();
      });
  }

but it's not working the way I need.

And also how to add a reverse function to hide items?

Thank you.

$(document).ready(function() {
  var list = $(".partners__ul li");
  var numToShow = 4;
  var button = $(".partners__button__a");
  var numInList = list.length;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    list.slice(showing - 1, showing + numToShow).fadeIn();
    var nowShowing = list.filter(':visible').length;
  });
});

.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>

mmm. Have you tried a `if` statement, when you click on the Button, to see if it's the Max number? — FoxInFlame, Oct 22 '15 at 08:08
The toggle you are looking for is no longer supported. http://stackoverflow.com/questions/14301935/where-has-fn-toggle-handlereventobject-handlereventobject-gone — mplungjan, Oct 22 '15 at 08:11

score 2 · Answer 1 · answered Oct 22 '15 at 08:55

I did something different. Used two buttons but instead of one just to hide and show at the same time when half content is visible. Not sure whether you need it this way, just thought about making it more functional.

    $(document).ready(function() {
      var list = $(".partners__ul li");
      var numToShow = 4;
      var button = $(".partners__button__a");
        var buttonLess = $(".partners__button__a_less");
      var numInList = list.length;
      var nowShowing = 4;
      list.hide();
      if (numInList > numToShow) {
        button.show();
      }
      list.slice(0, numToShow).show();
      button.click(function() {
          var showing = list.filter(':visible').length;
          list.slice(showing - 1, showing + numToShow).fadeIn();
          nowShowing = list.filter(':visible').length;
          if(numInList === nowShowing) {
              $(this).hide();
              buttonLess.text('Show Less')
          } else if(nowShowing > numToShow) {
              $(this).text('Show Even More');
              buttonLess.show();
          }
      });

        buttonLess.click(function() {
            var showing = list.filter(':visible').length;
            list.slice(showing - numToShow, showing).fadeOut();
            nowShowing = nowShowing - numToShow;
            if(numToShow === nowShowing) {
                $(this).hide();
                button.text('Show More');
            } else if(nowShowing < numInList) {
                $(this).text('Show Less');
                button.show();
            }
      });

    });

.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>
        <button class="partners__button__a_less" style="display:none">Show Less</button>
    </div>

This is almost certainly how I would have done it too. Nice answer! — Jamiec, Oct 22 '15 at 08:57
That's great! That's basically what I need but instead of two buttons I need a single button. — Artem Z, Oct 22 '15 at 09:04
in that case just edit my code a little bit, use the buttonLess click event code inside click event of button using if else condition, like if($(this).text() === 'Show Less') { //buttonLess condition } else { //button condition } — Shuvro, Oct 22 '15 at 09:08

Jamiec · Accepted Answer · 2015-10-22T09:11:06.190

Getting the text to change is easy enough, the simplest way would be to add this to the bottom of your button's click handler:

if(nowShowing == numInList){
    $(this).text("Show less");  
}
else{
    $(this).text("Show even more");
}

As for the second item of showing less, you could add this (agin in the click handler)

if(showing < numInList){
  list.slice(showing - 1, showing + numToShow).fadeIn();
}
else{
  list.slice(showing - numToShow, numInList).fadeOut();
}

From here, you need to handle the fact that once you've shown everything and you start being able to show less, you need some form of boolean to indicate if we're currently in the state of "showing" or "hiding".

This then presents another problem! As you're fading in and out the :visible state will not be correct until after the fade has completed. Therefore you should defer the functionality using an overload of fadeIn / fadeOut which takes a callback.

The finished code can be seen below.

$(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>

Thank You! "Show less" should hide 4 items till the beginning of the list. — Artem Z, Oct 22 '15 at 08:29
@ArtemZ - then you just need a boolean - something like `isShowing` - which gets reversed when you get to the end of the list. Do you think you'll manage to add that or do you want me to update? — Jamiec, Oct 22 '15 at 08:46
Thank You! I'm not that good at jQuery. I would appreciate your help. — Artem Z, Oct 22 '15 at 09:01

See more and see less button

2 Answers2

Linked

Related