1

I am using the accepted solution to this problem found here.

Solution's JSFiddle

My goal is simply to have the table's row expand when clicked. This solution works great for me aside from one issue. Once a the expanded row is visible, if you click near the very bottom of the expanded row, the row will disappear and will not be able to be re-expanded. This is slightly different from the accepted solution. If you click the border under "name" after a row has been expanded, the solutions row will also disappear with no way to re-expand.

Here is the JS function:

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

I will try to provide additional information if needed.

My td for only the expanding row has padding set to 0. If I give it some padding, clicking the padding, even before the row is expanded, will remove the whole expanding row.

EDIT To reproduce my issue click the border just under the 'N' of 'Name' in the previous solutions fiddle table after expanding a row.

EDIT Happens to my table if I click any part of the border.

FamousAv8er
  • 2,345
  • 2
  • 9
  • 27

2 Answers2

3

You have to change only one line in your jsfiddle and it will work:

Change $target.slideUp();to $target.closest("td").children("p").slideUp(); , and you will be able to expand even if you click at border.

Ishpreet
  • 659
  • 5
  • 19
0

I changed way to approach.

Please check the code and result by clicking the following link.

I hope that it is what you want.

https://jsfiddle.net/oLkxs1j4/3/

<style>
#table{
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;
}

#table tr{
  border-bottom: 1px solid black;
}

.expand-row{
  cursor: pointer;
}
.not-expand-row{
  cursor: not-allowed;
}
.expand-data{
  display: none;
}
</style>
<table id = "table">
  <tr class = "expand-row">
    <td>Click to expand-1</td>
    <td>Click to expand-1</td>
  </tr>
  <tr class = "expand-data">
    <td colspan = "2">
      <br><br><br><br><br><br>
      <button class = "click-to-close">CLOSE</button>
    </td>
  </tr>  
  <tr class = "expand-row">
    <td>Click to expand-1</td>
    <td>Click to expand-1</td>
  </tr>
  <tr class = "expand-data">
    <td colspan = "2">
      <br><br><br><br><br><br>
      <button class = "click-to-close">CLOSE</button>
    </td>
  </tr> 
  <tr class = "expand-row">
    <td>Click to expand-1</td>
    <td>Click to expand-1</td>
  </tr>
  <tr class = "expand-data">
    <td colspan = "2">
      <br><br><br><br><br><br>
      <button class = "click-to-close">CLOSE</button>
    </td>
  </tr> 
  <tr class = "expand-row">
    <td>Click to expand-1</td>
    <td>Click to expand-1</td>
  </tr>
  <tr class = "expand-data">
    <td colspan = "2">
      <br><br><br><br><br><br>
      <button class = "click-to-close">CLOSE</button>
    </td>
  </tr>   
</table>
<script>
$(function() {
    $('#table .expand-row').on('click', function(){
    if(!$(this).hasClass('not-expand-row')){
      var index = $(this).index('#table .expand-row');
      $('#table .expand-data').eq(index).css('display', 'table-row');
    }
  });

    $('#table .click-to-close').on('click', function(){
    var index = $(this).index('#table .click-to-close');
    $('#table .expand-data').eq(index).css('display', 'none');
    $('#table .expand-row').eq(index).addClass('not-expand-row');
  });
});
</script>
Daehue Kim
  • 62
  • 9