Can a disappearing <div> be put between two <md-tab>?

Question

I've tried to put a disappearing div between two md-tabs, but it doesn't seem to appear when the md-tab is pressed.

The disappearing div code works in a separate program but it doesn't seem to appear the way it's meant to when placed between two md-tabs.

     <md-tabs md-stretch-tabs
           md-selected="selectedIndex" id="top_tabs" class="mainTabs">

     <md-tab label="home">
         <md-tab-label class="showSingle" target="1">
         <span><i class="material-icons">Summary</i></span>
         </md-tab-label>
     </md-tab>

     <div id="div1" class="targetDiv">Lorum Ipsum1</div>

     <md-tab label="summery" class="showSingle" target="2">
       <md-tab-label  class="showSingle" target="2">
       <i class="material-icons">Contact</i>
       </md-tab-label>
     </md-tab>
     <div id="div2" class="targetDiv">Lorum Ipsum2</div>
      </md-tabs>

Javascript:

     <script>
     jQuery(function() {
       jQuery('#showall').click(function() {
         jQuery('.targetDiv').show();
       });
      jQuery('.showSingle').click(function() {
         jQuery('.targetDiv').hide();
         jQuery('#div' + $(this).attr('target')).show();
       });
    });
    </script>

CSS:

    <style type="text/css">
     .targetDiv{
     display: none;
     height: 10px;
     }
     </style>