Somehow my list of items does not show more or show less when clicking a button.

First you should see 3 items and a button with "+". Then when you click "+" the other items should show and then when clicking "-" the items limit back to 3 items again.

```
$(document).ready(function () {
  var x = $("#list .content"),
      y = "<span class='present'>+</span>";
  x.find("a").length > 3 && (x.toggleClass("div_hide"), x.append(y)),
  $(".present").click(function () {
    $(this).parent().toggleClass("div_hide"), "-" == $(this).text() 
      ? $(this).html("+") 
      : $(this).html("-")

```

```
#list .div_hide a:nth-child(n+3) {
  display: none !important;
}
span.present {
  display: block;
  color: black;
  background: yellow;
}

```

```
<h1>List</h1>
  <div id="list">
    <a class="content" href="#">one</a>
    <a class="content" href="#">two</a>
    <a class="content" href="#">three</a>
    <a class="content" href="#">four</a>
    <a class="content" href="#">five</a>
    <a class="content" href="#">six</a>
  </div>

```