Может ли исчезающий <div>быть помещен между двумя?

Question

Я пытался поместить исчезающий div между двумя вкладками md, но, кажется, он не появляется при нажатии md-tab.

Исчезающий код div работает в отдельной программе, но, похоже, он не выглядит так, как при размещении между двумя вкладками md.

     <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>