Toggle table rows

by Alvin Olavarrieta

HTML

Click on a row for more info:
<table>
  <tr>
    <td>+</td>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </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>+</td>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </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>+</td>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </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>

CSS

table {
  width: 75%;
}

tr {
  border: 2px solid #AEAEAE;
}

JavaScript

$(function() {
  $("td[colspan=3]").find("p").hide();
  $("table").click(function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ($target.closest("td").attr("colspan") > 1) {
      $target.slideUp();
      $target.closest("tr").prev().find("td:first").html("+");
    } else {
      $target.closest("tr").next().find("p").slideToggle();
      if ($target.closest("tr").find("td:first").html() == "+")
        $target.closest("tr").find("td:first").html("-");
      else
        $target.closest("tr").find("td:first").html("+");
    }
  });
});