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.

  1. all items
  2. items a
  3. 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

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -