How to toggle class "active" in an accordion

Question

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.

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>

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

Answer 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>