Bollate

HTML

[ANSWERED] javascript – How to toggle class “active” in an accordion

By

Nov 20, 2022 , , ,

Solution 1 :

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')

Solution 2 :

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>

Problem :

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>

By

Related Post

HTML

[ANSWERED] problem in selecting list item in html/css

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – Trying to align a div to the right using CSS

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022