One of my challenges involves toggling the visibility of a div (filter-panel--content) containing an unordered list when clicking on the label above it.
#LABEL/DIV THAT CAN BE CLICKED AND TRIGGERS .click()
<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 TO SHOW/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 THAT CAN BE CLICKED AND TRIGGERS .click()
<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 TO SHOW/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 THAT CAN BE CLICKED AND TRIGGERS .click()
<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 TO SHOW/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>
In my click() function, I am trying to toggle classes and want to also hide or show the clicked filter-panel--content:
$('.label-it').click(function() {
$(this).find(".filter-panel--title div").toggleClass('klapp klappe');
// Code to hide or show filter-panel--content should go here
});
However, I need assistance with only closing the clicked label's filter-panel--content without affecting others. Can someone provide guidance? Thank you!
-- edit:
I have another question regarding the toggle functionality
$(this).closest(".filter-panel--flyout").find(".filter-panel--content div")