Hiding a container will not hide the contents inside?

Question

Can someone explain to me why

$(".transaction_history_tab").hide();

won't hide both

// Container
<tbody class="transaction_history_tab">
</tbody>

// In example this is inside the transaction_history_tab container
<div class="data-info-box">
   <span>NO DATA TO SHOW</span>
</div>

After hiding transaction_history_tab, the message "NO DATA TO SHOW" appears.

$(".transaction_history_tab").hide();

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

// Without table tags around
<tbody class="transaction_history_tab">
  <div class="data-info-box">
    <span>NO DATA TO SHOW</span>
  </div>
</tbody>

Run codeHide result

Work with Rory's answer

$(".transaction_history_tab").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// With table tags around
<table>
  <thead>
    <tr>
      <td></td>
    </tr>
  </thead>
  <tbody class="transaction_history_tab">
    <tr> 
      <td>
        <div class="data-info-box">
          <span>NO DATA TO SHOW</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Run codeHide result

Answer 1

The problem is caused by invalid HTML. The item tbodymust be contained inside table. Since your not, it is not displayed. You can see this if you check the DOM in the inspector. tbodymay contain only elements tr. So the child is divalso a problem, it needs to be wrapped in tr, and then a td.

tbody , .transaction_history_tab , .

, HTML. table tbody, tr td div, tbody.

$(".transaction_history_tab").hide();

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

<table>
  <thead>
    <tr>
      <td>This will be shown...</td>
    </tr>
  </thead>
  <tbody class="transaction_history_tab">
    <tr>
      <td>
        <div class="data-info-box">
          <span>NO DATA TO SHOW</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Hide result

Answer 2

, tbody>div /rows/cells HTML.

table>tbody>tr>td>div, JSFiddle https://jsfiddle.net/u58460ot

div tbody

Answer 3

<table>
 <tbody class="transaction_history_tab">
   <tr>
    <td>
     <div class="data-info-box">
       <span>NO DATA TO SHOW</span>
     </div>

    </td>
 </tr>
 </tbody>
</table>

, , ...

Answer 4

css , , css - :

.data-info-box {
    visibility: visible;
}

:

.data-info-box {
    visibility: inherit;
}

This is because the child set to "visible" will still be displayed, even if their parent is "hidden". Setting visibility to inherit means that the child will use any visibility attribute that the parent has.

'Inherit' is the default value for visibility, so if this is a problem, you would have to manually set it to “visible” in your css (or dynamically in js).