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?
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.