Как переключить класс «активный» в гармошку

Question

Я пытаюсь заставить мой аккордеон вести себя так, как показано на рисунке ниже, но я не знаю, как переключить «активный» класс с помощью своего кода jquery.

Первый элемент («Cashback Online») начинается как «активный», но я хочу удалить его класс, когда нажимаю на другой элемент.

Изображение очень четко объясняет ожидаемое поведение, которое Я хочу.

Мой код:

$('.menu').on('click', function() {
  $('.content').hide();
  $(this).find('.content').show();
});


$('.menu').on('click', function(event) {
  $target = $(event.target);
  $target.addClass('active');
});

.sectionThree-container>ul {
  list-style: none;
}

.sectionThree-container>ul p {
  display: none;
}

.sectionThreeOptions>h2 {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 22px;
  line-height: 22px;
  color: #4F4F4F;
  margin-left: 22px;
  cursor: pointer;
}

.sectionThreeOptions>h2.active {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 22px;
  color: #222222;
  margin-left: 0;
}

.sectionThree-container .circle {
  width: 32px;
  height: 32px;
  left: 142px;
  top: 2050px;
  background: #FF6B7D;
  color: #fff;
  border-radius: 50%;
  margin: 20px 0 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
}

.sectionThree-container .circle.active {
  width: 60px;
  height: 60px;
  left: 128px;
  top: 1820px;
  background: #EF1247;
  margin-left: -10px;
}

.sectionThree-container>ul>li>p.active {
  margin-bottom: 60px;
}

.sectionThreeOptions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sectionThree-container">
  <ul>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle active">1</div>
        <h2 class="active">cashback online</h2>
      </div>
      <p class="content" style="display: inline">
        Ofereça cashback a seus clientes em nossos </br>
        mais de 300 e-commerces parceiros através de </br>
        uma plataforma personalizável
      </p>
    </li>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle">2</div>
        <h2>cashback offline</h2>
      </div>
      <p class="content">
        Ofereça cashback em lojas físicas parceiras </br>
        ou em sua própria rede e produtos através de uma </br>
        experiência online e offline
      </p>
    </li>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle">3</div>
        <h2>recompensas</h2>
      </div>
      <p class="content">
        Tenha sua própria plataforma de recompensas,</br>
        permitindo que seus usuários acumulem e </br>
        troquem pontos em mais de 50 parceiros
      </p>
    </li>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle">4</div>
        <h2>gamificação</h2>
      </div>
      <p class="content">
        Torne a experiência ainda mais imersiva com </br>
        mecânicas de gamificação na sua plataforma </br>
        de fidelização personalizada
      </p>
    </li>
  </ul>

  <div class="sectionThreeOptionsImage">
    <img src="images/imagemUm.png" id="sectionThreeImage" alt="">
  </div>
</div>
</div>

Answer 1

Вы можете использовать одну функцию, чтобы делать все, что вам нужно, не нужно двух слушателей.

Внутри слушателя / функции используйте jQuery, чтобы выбрать всех потомков из div.sectionThree-container, которые имеют класс active и удалите этот класс.
Теперь, когда вы находитесь в контексте .menu, this, по которому щелкнули, обратитесь к нужному меню, по которому щелкнули, так что просто найдите его ".content" и покажите его, найдите h2 и добавьте «активный» класс, найдите круг и добавьте к нему «активный» класс.

Смотри ниже, это то, что тебе нужно?

$('.menu').on('click', function() {
  $(".sectionThree-container .active").removeClass("active")
  $('.sectionThree-container .content').hide();
  let clickedContent = $(this);
  clickedContent.find('.content').show();
  clickedContent.find('h2').addClass('active');
  clickedContent.find('.circle').addClass('active');
});

.sectionThree-container>ul {
  list-style: none;
}

.sectionThree-container>ul p {
  display: none;
}

.sectionThreeOptions>h2 {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 22px;
  line-height: 22px;
  color: #4F4F4F;
  margin-left: 22px;
  cursor: pointer;
}

.sectionThreeOptions>h2.active {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 22px;
  color: #222222;
  margin-left: 0;
}

.sectionThree-container .circle {
  width: 32px;
  height: 32px;
  left: 142px;
  top: 2050px;
  background: #FF6B7D;
  color: #fff;
  border-radius: 50%;
  margin: 20px 0 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
}

.sectionThree-container .circle.active {
  width: 60px;
  height: 60px;
  left: 128px;
  top: 1820px;
  background: #EF1247;
  margin-left: -10px;
}

.sectionThree-container>ul>li>p.active {
  margin-bottom: 60px;
}

.sectionThreeOptions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sectionThree-container">
  <ul>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle active">1</div>
        <h2 class="active">cashback online</h2>
      </div>
      <p class="content" style="display: inline">
        Ofereça cashback a seus clientes em nossos </br>
        mais de 300 e-commerces parceiros através de </br>
        uma plataforma personalizável
      </p>
    </li>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle">2</div>
        <h2>cashback offline</h2>
      </div>
      <p class="content">
        Ofereça cashback em lojas físicas parceiras </br>
        ou em sua própria rede e produtos através de uma </br>
        experiência online e offline
      </p>
    </li>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle">3</div>
        <h2>recompensas</h2>
      </div>
      <p class="content">
        Tenha sua própria plataforma de recompensas,</br>
        permitindo que seus usuários acumulem e </br>
        troquem pontos em mais de 50 parceiros
      </p>
    </li>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle">4</div>
        <h2>gamificação</h2>
      </div>
      <p class="content">
        Torne a experiência ainda mais imersiva com </br>
        mecânicas de gamificação na sua plataforma </br>
        de fidelização personalizada
      </p>
    </li>
  </ul>

  <div class="sectionThreeOptionsImage">
    <img src="images/imagemUm.png" id="sectionThreeImage" alt="">
  </div>
</div>
</div>

Если вы хотите уменьшить количество строк кода, вы можете сделать несколько jQuery выделений в одном операторе, например clickedContent.find("h2, .circle").addClass('active')

Answer 2

добавить это по клику
$('.menu div,.menu div h2').removeClass('active'); $(this).find('div,div h2').addClass('active');

см. Фрагмент

$('.menu').on('click', function () {
	$('.content').hide();
	$(this).find('.content').show();
});


$('.menu').on('click', function (event) {
  $('.menu div,.menu div h2').removeClass('active');
  $(this).find('div,div h2').addClass('active');
});

.sectionThree-container>ul {
    list-style: none;
}

.sectionThree-container>ul p {
    display: none;
}

.sectionThreeOptions>h2 {
    font-family: Poppins;
    font-style: normal;
    font-weight: bold;
    font-size: 22px;
    line-height: 22px;
    color: #4F4F4F;
    margin-left: 22px;
    cursor: pointer;
}

.sectionThreeOptions>h2.active {
    font-family: Poppins;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    line-height: 22px;
    color: #222222;
    margin-left: 0;
}

.sectionThree-container .circle {
    width: 32px;
    height: 32px;
    left: 142px;
    top: 2050px;
    background: #FF6B7D;
    color: #fff;
    border-radius: 50%;
    margin: 20px 0 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 30px;
}

.sectionThree-container .circle.active {
    width: 60px;
    height: 60px;
    left: 128px;
    top: 1820px;
    background: #EF1247;
    margin-left: -10px;
}

.sectionThree-container>ul>li>p.active {
    margin-bottom: 60px;
}

.sectionThreeOptions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sectionThree-container">
            <ul>
                <li class="menu">
                    <div class="sectionThreeOptions">
                        <div class="circle active">1</div>
                        <h2 class="active">cashback online</h2>
                    </div>
                    <p class="content" style="display: inline">
                        Ofereça cashback a seus clientes em nossos </br>
                        mais de 300 e-commerces parceiros através de </br>
                        uma plataforma personalizável
                    </p>
                </li>
                  <li class="menu">
                    <div class="sectionThreeOptions">
                        <div class="circle">2</div>
                        <h2>cashback offline</h2>
                    </div>
                    <p class="content">
                        Ofereça cashback em lojas físicas parceiras </br>
                        ou em sua própria rede e produtos através de uma </br>
                        experiência online e offline
                    </p>
                </li>
                <li class="menu">
                    <div class="sectionThreeOptions">
                        <div class="circle">3</div>
                        <h2>recompensas</h2>
                    </div>
                    <p class="content">
                        Tenha sua própria plataforma de recompensas,</br>
                         permitindo que seus usuários acumulem e </br>
                          troquem pontos em mais de 50 parceiros
                    </p>
                </li>
                <li class="menu">
                    <div class="sectionThreeOptions">
                        <div class="circle">4</div>
                        <h2>gamificação</h2>
                    </div>
                    <p class="content">
                        Torne a experiência ainda mais imersiva com </br>
                        mecânicas de gamificação na sua plataforma </br>
                        de fidelização personalizada
                    </p>
                </li>
            </ul>

            <div class="sectionThreeOptionsImage">
                <img src="images/imagemUm.png" id="sectionThreeImage" alt="">
            </div>
        </div>
    </div>