Скрытие всех элементов внутри div, кроме щелчка ярлыка, чтобы показать div в фоновом режиме

Question

У меня есть два div. dvMapContainer работает как полностраничный фон и отображает карту листовки, dvEditContainer накладывает div на некоторые элементы управления сверху карты.

код выглядит так:

<div id="dvMapContainer" style="height: 93%; width: 100%;position: absolute; top: 0; left: 0;"></div> 

<div class="container" id="dvEditContainer"> 
    <div class="container-header">Update Inventory</div> 
<div class="col-sm-4"> 

    <div class="form-group"> 
     <label for="plateNumber" class="col-sm-5 control-label">Plate #:</label> 
     <div class="col-sm-7"> 
      <input type="text" 
        data-ng-model="bb.plateNumber" 
        name="plateNumber" 
        id="plateNumber" 
        class="form-control"/> 
     </div> 
    </div> 
</div> 

То, что я хочу, чтобы это произошло, когда пользователь нажимает на этикетке «Plate #» это будет скрывать всю dvEditContainer, но показать этикетку, как это было. Когда пользователь снова нажмет на метку, dvEditContainer снова будет виден.

Мой JQuery код выглядит следующим образом:

$(document).ready(function() { 
      $('label').click(function (e) { 
       var target = $(e.target); 
       console.log(target); 
       $('#dvEditContainer').hide(); 
       $(target).show(); 
      }); 
     }); 

Это, однако, скрывает dvEditContainer, как ожидалось, но оленья кожа показывать этикетку либо.

Любые идеи или подсказки будут высоко оценены.

jsfiddle нерабочего кода.

Answer 1

Поскольку ярлык находится внутри div, который находится внутри divvditContainer div, он также скрыт.

Перемещение div группы формы вне dvEditContainer.

Answer 2

Ваш <label> не виден, потому что вы просто спрятали его родителя. Либо оставите dvEditContainer видимым и спрячьте все элементы, кроме своего <label>, или переместите свой <label> другому родителю.