How do I unhide child elements after the parent has been hidden?

I'm not sure what I need here but I am working on filtering results. Within the content div are the rows I am filtering. This is just one of the rows. When I hide .m-music, JQuery hides all of the child elements as well. When I want to show everything, I thought I could just do:

$("div.content div.m-music".show();

and have it show all its children, but that's not what's happening. It will only unhide the .m-music div. How can I show everything? Do I need a loop?

  <div class="content">
    <div class="m-music">  <----------------This and below should be unhidden
      <div class="tas"></div>
      <div class="data-row">
        <div class="info">
          <table>
            <tbody>
              <tr>
                <td>this should be unhidden</td>
                <td>this should be unhidden</td>
              </tr>
            </tbody>
          </table>
          <div>this should be unhidden</div>
        </div>
        <div class="user-post">
          this should be unhidden
        </div>
      </div>
    </div>
  </div>

So, I can see from the snippet that was posted below that only the parent is being hidden. I think I know why now after looking at the JQuery.

$("div.content div").hide(); //hide all

Is it because this div.content div is recursively setting all the divs to hidden? If so, how do I only hide the parent?

When you hide a class, it is given a style="display:none;" attribute and any children elements are hidden, but none of them are given this attribute so when you show that class again, the children elements will become visible again.

So if that's not happening in your code I suggest that there might be another problem somewhere.

I made a snippet to demonstrate this hiding and showing on a loop.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

setInterval(function() {
  $("div.content div.m-music").hide();
}, 2000)
setTimeout(function() {
  setInterval(function() {
    $("div.content div.m-music").show();
  }, 2000)
}, 1000)

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class="m-music">
    <div class="tas"></div>
    <div class="data-row">
      <div class="info">
        <table>
          <tbody>
            <tr>
              <td>this should be unhidden</td>
              <td>this should be unhidden</td>
            </tr>
          </tbody>
        </table>
        <div>this should be unhidden</div>
      </div>
      <div class="user-post">
        this should be unhidden
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->