CODEWITHSUNDEEP
jquery
Kyle Underhill
Kyle Underhill

Reputation: 109

jQuery - Hide non-active elements using filter()

I want to be able to find every .sub__wrap that has class active, and give the same class to it's associated .sub__item so that all of the non-active elements will be hidden.

In the function function toggleSubcatDiv(input, showTypeList) I cannot figure out how to add/remove the active class to the .sub__item in order to hide the entire item and not just the nested div .sub__wrap.

$(".category__list").on("click click.init", ".category__item", function(e) {
  toggleSubcatDiv($(":radio", this), "init" !== e.namespace);
});
$(".category__item.active", ".category__list").trigger("click.init");

function toggleSubcatDiv(input, showTypeList) {
  var $list = $(input).closest(".item");
  $list
    .find(".sub__wrap")
    .filter(".active")
    .removeClass("active")
    .end()
    .filter('[data-for="' + $(input).attr("data-category") + '"]')
    .addClass("active");
  if (showTypeList) {
    $list.find(".sub__list").addClass("visible");
  }
}
.sub__item {
  min-width: 20px;
  min-height: 20px;
  border: 1px solid
}

.sub__wrap:not(.active) {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="category__list">
    <div>
      <label class="category__item" data-color="blue" style="color:blue">
<input type="radio" data-category="cat1" name="cat">Blue</label>
    </div>
    <div>
      <label class="category__item" data-color="red" style="color:red">
<input type="radio" data-category="cat2" name="cat">Red</label>
    </div>
  </div>
  Sub Category:
  <div class="sub__container">
    <div>
      <div class="sub__list">
        <div class="sub__item">
          <div>
            <div class="sub cat1">
              <div class="sub__wrap" data-for="cat1">
                <label class="sub__label" for="comp">
<input class="sub__input" id="comp" type="radio" name="radios" />
<span class="sub__icon"><b>Main 1A</b></span></label>
              </div>
            </div>
          </div>
        </div>
        <div class="sub__item">
          <div>
            <div class="sub cat1">
              <div class="sub__wrap" data-for="cat1">
                <label class="sub__label" for="ticket">
<input class="sub__input" id="ticket" type="radio" name="radios" />
<span class="sub__icon">
<b>Main 1B</b></span></label>
              </div>
            </div>
          </div>
        </div>
        <div class="sub__item">
          <div>
            <div class="sub cat2">
              <div class="sub__wrap" data-for="cat2">
                <label class="sub__label" for="elephant">
<input class="sub__input" id="elephant" type="radio" name="radios" />
<span class="sub__icon"><b>Main 2A</b></span></label>
              </div>
            </div>
          </div>
        </div>
        <div class="sub__item">
          <div>
            <div class="sub cat2">
              <div class="sub__wrap" data-for="cat2">
                <label class="sub__label" for="hook">
<input class="sub__input" id="hook" type="radio" name="radios" />
<span class="sub__icon"><b>Main 2B</b></span></label>
              </div>
            </div>
          </div>
        </div>
        <div class="sub__item">
          <div>
            <div class="sub cat2">
              <div class="sub__wrap" data-for="cat2">
                <label class="sub__label" for="plane">
<input class="sub__input" id="plane" type="radio" name="radios" />
<span class="sub__icon"><b>Main 2C</b></span></label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 69

Answers (1)

Huangism
Huangism

Reputation: 16438

Assuming your html cannot change, you can do the following

First, simply find the active class in the list and remove the active class, no need to do any kind of filtering

then you add the active class to your sub wrap and sub item. I added a line in the css to hide non active sub items

If your html can change, it would make the code much simpler, you can add something to the sub item like a data attribute or any kind of identifier so you can target it easier for add/remove of class

$(".category__list").on("click click.init", ".category__item", function(e) {
  toggleSubcatDiv($(":radio", this), "init" !== e.namespace);
});
$(".category__item.active", ".category__list").trigger("click.init");

function toggleSubcatDiv(input, showTypeList) {
  var $list = $(input).closest(".item");
  $list
    .find(".active")
    .removeClass("active");

  $list
    .find(".sub__wrap")
    .filter('[data-for="' + $(input).attr("data-category") + '"]')
    .addClass("active")
    .closest(".sub__item")
    .addClass("active");
  if (showTypeList) {
    $list.find(".sub__list").addClass("visible");
  }
}
.sub__item {
  min-width: 20px;
  min-height: 20px;
  border: 1px solid
}

.sub__item:not(.active),
.sub__wrap:not(.active) {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="category__list">
    <div>
      <label class="category__item" data-color="blue" style="color:blue">
<input type="radio" data-category="cat1" name="cat">Blue</label>
    </div>
    <div>
      <label class="category__item" data-color="red" style="color:red">
<input type="radio" data-category="cat2" name="cat">Red</label>
    </div>
  </div>
  Sub Category:
  <div class="sub__container">
    <div>
      <div class="sub__list">
        <div class="sub__item">
          <div>
            <div class="sub cat1">
              <div class="sub__wrap" data-for="cat1">
                <label class="sub__label" for="comp">
<input class="sub__input" id="comp" type="radio" name="radios" />
<span class="sub__icon"><b>Main 1A</b></span></label>
              </div>
            </div>
          </div>
        </div>
        <div class="sub__item">
          <div>
            <div class="sub cat1">
              <div class="sub__wrap" data-for="cat1">
                <label class="sub__label" for="ticket">
<input class="sub__input" id="ticket" type="radio" name="radios" />
<span class="sub__icon">
<b>Main 1B</b></span></label>
              </div>
            </div>
          </div>
        </div>
        <div class="sub__item">
          <div>
            <div class="sub cat2">
              <div class="sub__wrap" data-for="cat2">
                <label class="sub__label" for="elephant">
<input class="sub__input" id="elephant" type="radio" name="radios" />
<span class="sub__icon"><b>Main 2A</b></span></label>
              </div>
            </div>
          </div>
        </div>
        <div class="sub__item">
          <div>
            <div class="sub cat2">
              <div class="sub__wrap" data-for="cat2">
                <label class="sub__label" for="hook">
<input class="sub__input" id="hook" type="radio" name="radios" />
<span class="sub__icon"><b>Main 2B</b></span></label>
              </div>
            </div>
          </div>
        </div>
        <div class="sub__item">
          <div>
            <div class="sub cat2">
              <div class="sub__wrap" data-for="cat2">
                <label class="sub__label" for="plane">
<input class="sub__input" id="plane" type="radio" name="radios" />
<span class="sub__icon"><b>Main 2C</b></span></label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions