user3732216 user3732216 - 1 month ago 9
jQuery Question

Sliding down a row under another

I'm trying to find out how I can slide the row currently occupied by the blah blah text under the row before it which will show more information. Any thoughts on what I am doing wrong because right now when I click on it nothing hapapens?

I am not receiving any javascript errors.

<table class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:5px;">
<a id="orderData" class="btn btn-xs"><i class="fa fa-plus-circle fa-2x"></i></a>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="8"><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>
</tbody>
</table>

$(function() {
$("td[colspan=8]").parent().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("+");
}
});
});

Answer

Try this:

$(function() {
    $(".info-toggler").on('click', function(event) {
        $(this).parents("tr").next().toggleClass("hide");
        $(this).children("i").toggleClass("fa-minus-circle").toggleClass("fa-plus-circle");
    });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<table class="table table-bordered table-hover">
  <thead>
<tr>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th>Action</th>
</tr>
  </thead>
  <tbody>
<tr>
  <td style="width:5px;">
    <a class="btn btn-xs info-toggler"><i class="fa fa-plus-circle fa-2x"></i></a>
  </td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr class="info-row hide">
  <td></td>
  <td colspan="10">
    <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 style="width:5px;">
    <a class="btn btn-xs info-toggler"><i class="fa fa-plus-circle fa-2x"></i></a>
  </td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr class="hide">
  <td></td>
  <td colspan="10">
    <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>
  </tbody>
</table> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>