CODEWITHSUNDEEP
javascriptjqueryhtml
tCoe
tCoe

Reputation: 401

JS SlideUp and SlideDown not working on table properly

I am very new to Javascript, so please forgive me if this seems like a simple problem.

I am trying to do a simple toggle function between two buttons that slide the content i want displayed up and down, using Javascript. Unfortunately, the effect is only working on the first row of data that is displayed in my table.

Could someone spot what i need to do to make this function work for each table row?

Here is a link to my JSFiddle: JSFiddle Link

Here is my code:

$(function() {
  $("td[colspan=9]").find("p").hide();
  $("#less").hide();
  $("#more").click(function(event) {

    event.stopPropagation();
    var $target = $(event.target);

    if ($target.closest("td").attr("colspan") > 1) {
      $target.slideDown();
      $("#less").show();
      $("#more").hide();
    } else {
      $target.closest("tr").next().find("p").slideDown();
      $("#less").show();
      $("#more").hide();
    }

  });
  $("#less").click(function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ($target.closest("td").attr("colspan") > 1) {
      $target.slideUp();
      $("#more").show();
      $("#less").hide();
    } else {
      $target.closest("tr").next().find("p").slideUp();
      $("#more").show();
      $("#less").hide();
    }

  });
});
table {
  width: 75%;
}
tr {
  border: 2px solid #AEAEAE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button id=more>+</button>
      <button id=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>

  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button id=more>+</button>
      <button id=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>

  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button id=more>+</button>
      <button id=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>
</table>

Thank you on advance for any help.

Upvotes: 0

Views: 218

Answers (1)

Deep
Deep

Reputation: 9794

There are few issues in your snippet.

1: There are duplicate id element for more and less

2: you are binding click event on these duplicated id selectors which is making the whole logic of sliding up/ sliding down wrong

Try the below code.

I have changed the duplicate ids to class and done some changes to slid up.slide down and show more/less logic.

$(function() {
  $("td[colspan=9]").find("p").hide();
  $(".more").hide();
  $(document).on("click",".more", function(event) {

    event.stopPropagation();
    var $target = $(event.target);

    if ($target.closest("td").attr("colspan") > 1) {
      $target.slideDown();
      $target.next(".less").show();
      $target.hide();
    } else {
      $target.closest("tr").next().find("p").slideDown();
      $target.next(".less").show();
      $target.hide();
    }

  });
   $(document).on("click",".less", function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ($target.closest("td").attr("colspan") > 1) {
      $target.slideUp();
      $target.prev(".more").show();
      $target.hide();
    } else {
      $target.closest("tr").next().find("p").slideUp();
      $target.prev(".more").show();
      $target.hide();
    }

  });
});
table {
  width: 75%;
}
tr {
  border: 2px solid #AEAEAE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button class=more>+</button>
      <button class=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>

  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button class=more>+</button>
      <button class=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>

  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button class=more>+</button>
      <button class=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>
</table>

Upvotes: 2

Related Questions