隐藏并显示具有无序列表的div

Question

I try to hide and show a div (filter-panel--content) with an unordered list in it, when clicking on the label above.

#LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE
<div class="filter-panel--flyout">
   <div id="label-it" class="label-it"><label class="filter-panel--title">
      <h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div>
   </label></div>

#DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED
<div class="filter-panel--content">
   <ul class="filter-panel--option-list">
      <li class="filter-panel--option">
      <div class="option--container">
         <span class="filter-panel--checkbox">
         <input type="checkbox" id="__f__575" name="__f__575" value="575">
         </span>
      <label class="filter-panel--label" for="__f__575">8</label>
      </div>
      </li>
   </ul>
</div></div>

#LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE
<div class="filter-panel--flyout">
   <div id="label-it" class="label-it"><label class="filter-panel--title">
      <h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div>
   </label></div>

#DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED
<div class="filter-panel--content">
   <ul class="filter-panel--option-list">
      <li class="filter-panel--option">
      <div class="option--container">
         <span class="filter-panel--checkbox">
         <input type="checkbox" id="__f__576" name="__f__576" value="576">
         </span>
      <label class="filter-panel--label" for="__f__576">9</label>
      </div>
      </li>
   </ul>
</div>

#LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE
<div class="filter-panel--flyout">
   <div id="label-it" class="label-it"><label class="filter-panel--title">
      <h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div>
   </label></div>

#DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED
<div class="filter-panel--content">
   <ul class="filter-panel--option-list">
      <li class="filter-panel--option">
      <div class="option--container">
         <span class="filter-panel--checkbox">
         <input type="checkbox" id="__f__577" name="__f__577" value="577">
         </span>
      <label class="filter-panel--label" for="__f__577">10</label>
      </div>
      </li>
   </ul>
</div>

Here is my click() function, which toggle's the class (changing a backgroundimage) and additionally i want to hide and show the clicked filter-panel--content:

$('.label-it').click(function() {
  $(this).find(".filter-panel--title div").toggleClass('klapp klappe');
  //hide and show filter-panel--content
  //tried something like this but it doesn't worked: 
  //$(this).find(".filter-panel--content div").hide();
});

But it should only closes the clicked label filter-panel--content, not every class of it. Can someone help? Thank you!

-- edit:

i have a additional question, the toggle works fine $(this).closest(".filter-panel--flyout").find(".filter-panel--content div") but when i submit my inputs, the display:none classes will be refreshed and it is display:block.. how can i submit my toggled .filter-panel--content so that it stays toggled?

Answer 1

You can't use $(this).find(".filter-panel--content div") because filter-panel--content is not a child of label-it .

So in order to make it work, you have to use .closest() like as in $(this).closest(".filter-panel--flyout").find(".filter-panel--content div")

Demo

 $('.label-it').click(function() { $(this).find(".filter-panel--title div").toggleClass('klapp klappe'); $(this).closest(".filter-panel--flyout").find(".filter-panel--content").toggle(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="filter-panel--flyout"> <div id="label-it" class="label-it"><label class="filter-panel--title"> <h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div> </label> </div> #DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED <div class="filter-panel--content"> <ul class="filter-panel--option-list"> <li class="filter-panel--option"> <div class="option--container"> <span class="filter-panel--checkbox"> <input type="checkbox" id="__f__575" name="__f__575" value="575"> </span> <label class="filter-panel--label" for="__f__575">8</label> </div> </li> </ul> </div> </div> #LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE <div class="filter-panel--flyout"> <div id="label-it" class="label-it"><label class="filter-panel--title"> <h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div> </label> </div> #DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED <div class="filter-panel--content"> <ul class="filter-panel--option-list"> <li class="filter-panel--option"> <div class="option--container"> <span class="filter-panel--checkbox"> <input type="checkbox" id="__f__576" name="__f__576" value="576"> </span> <label class="filter-panel--label" for="__f__576">9</label> </div> </li> </ul> </div> </div> #LABEL/DIV WHICH CAN BE CLICKED AND THE .click() SHOULD FIRE <div class="filter-panel--flyout"> <div id="label-it" class="label-it"><label class="filter-panel--title"> <h3 class="rums">Ports</h3><div id="klapp" class="klapp"></div> </label></div> #DIV WHICH SHOULD show AND hide WHEN LABEL IS CLICKED <div class="filter-panel--content"> <ul class="filter-panel--option-list"> <li class="filter-panel--option"> <div class="option--container"> <span class="filter-panel--checkbox"> <input type="checkbox" id="__f__577" name="__f__577" value="577"> </span> <label class="filter-panel--label" for="__f__577">10</label> </div> </li> </ul> </div> </div>