Home » Jquery » javascript – How to toggle class "active" in an accordion

javascript – How to toggle class "active" in an accordion

Posted by: admin February 22, 2020 Leave a comment

Questions:

I’m trying to make my accordion behave like in the image bellow, but I’m dont know how I can toggle the “active” class with my jquery code.

The first item (“cashback online”) starts as “active”, but I want to remove its class when I click in another item.

The image explains very clearly the expected behavior that I want.

enter image description here

My code:

$('.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>
How to&Answer:

You can use a single function to do everything you need, don’t need two listeners.

Inside the listener/function, use jQuery to select all children from div.sectionThree-container that have class active and remove this class.
Now since you are inside the clicked .menu, this context refer to the clicked menu you want, so just find its “.content” and show it, find h2 and add “active” class, find the circle and add “active” class to it also.

See below, is that what you need?

$('.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>

If you want to reduce code lines, you can make some of the jQuery selections in a single statement, such as clickedContent.find("h2, .circle").addClass('active')

Answer:

add this on click
$('.menu div,.menu div h2').removeClass('active');
$(this).find('div,div h2').addClass('active');

see snippet

$('.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>