Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<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>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
</ul>
 
#show-more {border: 1px solid #99f; list-style: none; cursor: pointer; padding: 3px; display: inline-block; line-height: 1; border-radius: 3px;}
 
$(function () {
  if ($("ul").children().length > 5) {
    $("ul li:nth-child(5)").after('<li id="show-more">Show / Hide</li>');
    $("#show-more").click(function () {
      $this = $(this);
      $(this).nextAll().fadeToggle(function () {
        $this.text(function () {
          return ($this.next().is(":visible") ? "Hide" : "Show");
        });
      });
    }).html("Show").nextAll().fadeOut();
  }
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers