addClass to header <h1> if li has Class

Question

I've been fiddling around with my code, but I can't get it to work properly.

I have three lists, each having an h1-header. If one clicks on a li, it toggles the class to highlight it, and I want the header of the list to get an highlighting class.

Till now, every header is getting the class except for the one, which should. Dunno what I am doing wrong... :/

Can anyone help me?

Here's my code:

    $(".add-btn").click(function() {
      $(this).toggleClass("hide-me");
      $(this).toggleClass("added");
      if ($(".label-wrap ul li").hasClass("added")) {
        $(".label-wrap").parent().find(".header-label").closest("h1").addClass("top-added");
      } else {
        $(".label-wrap h1").removeClass("top-added");
      }

    });

.hide-me {
  color: rgba(0, 0, 0, 0.1);
}
.added {
  color: rgba(0, 0, 0, 1);
}
.top-added {
  color: rgba(0, 170, 200, 1);
}
.delete-btn {
  width: 25px;
  height: 25px;
  padding: 10px;
}
.add-btn {
  width: 25px;
  height: 25px;
  padding: 10px;
}
.konf-wrapper-1 {
  margin-left: 50px;
}
.konf-wrapper-2 {
  margin-top: 60px;
  margin-left: 50px;
}
.konf-labels li {
  padding: 10px 0;
  font-weight: 400;
  width: 100%;
  text-align: left;
}
.konf-labels h1 {
  font-size: large;
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-6 konf-labels">
  <div class="container">
    <div class="row row-centered konf-wrapper-1">
      <div class="col-md-4 ">
        <h1 class=" top-added">Konzeption</h1>
        <ul>
          <li class="added">Zielgruppendefinition</li>
          <li class="added">Kommunikationsstrategie</li>
        </ul>
      </div>

      <div class="col-md-4 label-wrap">
        <h1 class="top-service">Kommunikationsmaßnahmen</h1>
        <ul class="li-wrap">
          <li class="hide-me add-btn point" id="1a">Exposé</li>
          <li class="hide-me add-btn point">Textdesign</li>
          <li class="hide-me add-btn point">Anzeigenkampagnen</li>
          <li class="hide-me add-btn point">Außenwerbung</li>
          <li class="hide-me add-btn point">Bautafelgestaltung</li>
          <li class="hide-me add-btn point">Geschäfts- & Presseberichte</li>
        </ul>
      </div>
    </div>

    <div class="row row-centered konf-wrapper-2 label-wrap">
      <div class="col-md-4 label-wrap">
        <h1 class="header-label">Online-Marketing</h1>
        <ul class="li-wrap">
          <li class="hide-me add-btn point">Website</li>
          <li class="hide-me add-btn point">Social Media</li>
          <li class="hide-me add-btn point">Digitale Präsentation</li>
        </ul>
      </div>

      <div class="col-md-4 label-wrap">
        <h1 class="header-label">Virtuelle Welten</h1>
        <ul class="li-wrap">
          <li class="hide-me add-btn point">Visualisierung</li>
          <li class="hide-me add-btn point">Virtuelle Begehung</li>
          <li class="hide-me add-btn point">Augmented Reality</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

You can achieve this by checking the number of li elements with the .active class within the current .label-wrap element and setting the class on the h1 accordingly using toggleClass(). Try this:

$(".add-btn").click(function() {
    var $li = $(this).toggleClass("hide-me added");
    var $wrap = $li.closest('.label-wrap');
    $wrap.find('h1').toggleClass('top-added', $wrap.find('.added').length > 0)
});

Working example