javascript - How to have a jquery toggle hide/show functionality that acts as multiple filtering? -
in page have 3 text act filters show/hide respective classes.
- all items
- items a
- items b
for example, when "all items" clicked, divs have class items
hidden, , strikethrough line showing on "all items" text.
the same goes other 2 options.
the logical error facing when 3 combining, "all items" option.
for example, if "all items" clicked, , "items a", "items a" appear, strikethrough on "all items" remains.
you can see code below.
how can fix "logical" errors , have filtering functionality?
$(".itema").click(function() { $(".itema-item").toggle(800); $(".itema").toggleclass("striketrough-line"); }); $(".itemb").click(function() { $(".itemb-item").toggle(800); $(".itemb").toggleclass("striketrough-line"); }); $(".all-items").click(function() { $(".items").toggle(800); $(".all-items").toggleclass("striketrough-line"); });
.striketrough-line { text-decoration: line-through; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="width:30%;float:left;"> <h3> filters </h3> <p class="all-items"> items </p> <p class="itema"> items </p> <p class="itemb"> items b </p> </div> <div style="width:69%;float:left"> <h3> items </h3> <div class="items itema-item"> <p>itema 1</p> </div> <br> <div class="items itemb-item"> <p>itemb 2</p> </div> <br> <div class="items itema-item"> <p>itema 3</p> </div> <br> <div class="items itemb-item"> <p>itemb 4</p> </div> </div>
a simple , clean solution contain items within <div class="items">
instead of applying items
class individually each item. way, when toggling on or off 1 of specific item groups, if parent element not visible (by disabling items), children won't either.
here's modified version:
$(".itema").click(function() { $(".itema-item").toggle(800); $(".itema").toggleclass("striketrough-line"); }); $(".itemb").click(function() { $(".itemb-item").toggle(800); $(".itemb").toggleclass("striketrough-line"); }); $(".all-items").click(function() { $(".items").toggle(800); $(".all-items").toggleclass("striketrough-line"); });
.striketrough-line { text-decoration: line-through; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="width:30%;float:left;"> <h3>filters</h3> <p class="all-items">all items</p> <p class="itema">items a</p> <p class="itemb">items b</p> </div> <div style="width:69%;float:left"> <h3>the items</h3> <div class="items"> <div class="itema-item"> <p>itema 1</p> </div> <br> <div class="itemb-item"> <p>itemb 2</p> </div> <br> <div class="itema-item"> <p>itema 3</p> </div> <br> <div class="itemb-item"> <p>itemb 4</p> </div> </div> </div>
Comments
Post a Comment