I have a table as follows:

which on "click" becomes

on "click" the text "some-text-initially-hidden" is not getting displayed after "click", i want to show and hide the text on "click" I have a working table as seen here:jsfiddle

Code: HTML:

<link href='http://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="font-size: 13px;"> 

<th> header1</th>
<th> header2 </th>

<tbody>
   <tr class="test">
        <td>data-always-visible
            <span class="complete">some-data-to hide and show</span>
            <br>
            <i class="fa fa-chevron-down" style="font-size: 9px;">Click for more details of </i>
        </td>
        <td> some data...</td>
   </tr>
  
</tbody>
</table>

CSS:

.test~ .test2{
  display: none;
}
.open .test~ .test2{
  display: table-row;
}
.test {
  cursor: pointer;
}
.complete{
    display:none;
}

JS/JQuery:

        $('table').on('click', 'tr.test .fa-chevron-down', function()         {
            $(this).closest('tbody').toggleClass('open');
            $(this).closest('complete').show();
        });
        

Thank you in advance.

CodePudding user response：

span.complete is a sibling of i.fa-chevron-down. $.closest only searches the supplied elements themselves and their ancestors.

You can use $.siblings instead.

$('table').on('click', 'tr.test .fa-chevron-down', function()         {
    $(this).closest('tbody').toggleClass('open');
    $(this).siblings('.complete').show();
});

.test~ .test2{
  display: none;
}
.open .test~ .test2{
  display: table-row;
}
.test {
  cursor: pointer;
}
.complete{
    display:none;
}

<link href='http://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="font-size: 13px;">

  <th> header1</th>
  <th> header2 </th>

  <tbody>
    <tr class="test">
      <td>data-always-visible
        <span class="complete">some-data-to hide and show</span>
        <br>
        <i class="fa fa-chevron-down" style="font-size: 9px;">Click for more details of </i>
      </td>
      <td> some data...</td>
    </tr>

    <tr class="test2">
      <td>data-always-visible</td>
      <td> some data...</td>
    </tr>
    <tr class="test2">
      <td>data-always-visible</td>
      <td> some data...</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

You using wrong selector, it should be .complete and should use siblings instead of closest.

$(this).siblings('.complete').show();

https://jsfiddle.net/viethien/dbc349gm/6/

I updated code to show/hide your div

 if(!$(this).siblings('.complete').is(":visible")){
  $(this).siblings('.complete').show();
  }else{
  $(this).siblings('.complete').hide();
 }