使用 Jquery 切换 div 时如何更改图标 - 和 +？

Question

I am trying to code a section in HTML where you click a div it will expand its contents and other divs will toggle/hide. This is what I have and it is working perfectly:

If I click in the Personaliza title it will expand its contents and toggle/hide the other two titles.

Check the website in the third section: https://uniformaguatemalapruebas.herokuapp.com/

I am trying to add an icon - when the div is selected or expanded and the other two will show + icon. And If I click any title it will show + others will show - . If none are expanded they all will show + .

My issue is very simple but I am struggling at this.

This is what I have so far:

    <section id="about-us">
   <div class="container">
      <div class="row">
         <div class="col-6 col-12-narrower  ">
            <div class="quienes-somos contr">
               <div class="container-aboutus">
                  <!-- <div>
                     <p class="title-h5">
                        "Lo más importante no es destacar, 
                        <br/>
                        es ser recordado"
                     </p>
                     </div> -->
                  <div class="title-big">
                     <h2>¿Quiénes somos?</h2>
                  </div>
                  <div class="hr-aboutus"></div>
                  <div id="aboutus-texts">
                     <div class="uniforma-text">
                        <div class="main-title">
                           <h4>Unifica
                              <span><i class="fas fa-minus iconshow" style="float: right; margin-right: 1em;"></i></span>   
                           </h4>
                        </div>
                        <div class="item" id="active-item">
                           <p>
                              Uniforma Guatemala es una empresa 100% Guatemalteca con experiencia en la industria de la confección de uniformes. Lo conformamos un equipo de colaboradores con más de dos décadas de experiencia, lo que nos permite el criterio adecuado para la correcta asesoría en cuanto a imagen y materias primas.
                              Estamos altamente capacitados para la buena atención a nuestros clientes y comprometidos a mantener altos estándares en la fabricación de Uniformes.
                              Ofrecemos a nuestros clientes soluciones integrales y MODA.
                           </p>
                        </div>
                     </div>
                     <div class="uniforma-text">
                        <div class="main-title">
                           <h4>Personaliza</h4>
                        </div>
                        <div class="item">
                           <p>
                              Sabemos que las empresas son el motor de la economía y que día a día requieren de mejoras en su imagen para integrarse a las nuevas exigencias de un mercado cambiante y competitivo.
                              Conocemos de moda y tendencias por eso diseñamos nuestros Uniformes dándoles un toque personal e innovador para cada institución.
                              Ofrecemos soluciones completas y que se adapten a las necesidades específicas.
                           </p>
                        </div>
                     </div>
                     <div class="uniforma-text">
                        <div class="main-title">
                           <h4>Identifica</h4>
                        </div>
                        <div class="item">
                           <p>
                              Sabemos que la imagen y seguridad de los trabajadores debe estar respaldada por la calidad de los Uniformes, por lo que mantenemos altos estándares en la fabricación por producto, esto nos permite garantizar todas nuestras prendas.
                              Costuras pequeñas y reforzadas para su alta durabilidad y comodidad en el ambiente laboral.
                              Todas nuestras prendas tienen garantía contra defecto de fabricación.
                           </p>
                        </div>
                     </div>
                  </div>
                  <div class="contact-button-aboutus">
                     <button class="button danger">
                     <span>Contactar</span>
                     </button>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-6 col-12-narrower uniforma-main-image-tr">
            <div class="quienes-somos">
               <div class="image featured">
                  <h1>
                     <img src="/images/esta133.jpeg" alt="para-quien-hace-de-su-labor-una-pasion-dia-con-dia"/>
                  </h1>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

Javascript:

// toggle on the first title when page loads
$('#aboutus-texts .uniforma-text .item p').hide();
$('#active-item p').toggle();

//if I click any title it will expand itself and toggle off others.
$('#aboutus-texts .uniforma-text .main-title ').click(function(e){
e.preventDefault();
var block = $(this).parent().find('p');
$("#aboutus-texts .uniforma-text .item p").not(block).hide();
block.toggle(200);
});

PD: I am using Font awesome for icons.

Answer 1

maybe you can try this

 // toggle on the first title when page loads $('#aboutus-texts.uniforma-text.item p').hide(); $('#active-item p').toggle(); const setIcon = (icon, show) => { if (show) { icon.removeClass("fa-plus"); icon.addClass("fa-minus"); } else { icon.removeClass("fa-minus"); icon.addClass("fa-plus"); } } $('#aboutus-texts.uniforma-text.main-title ').click(function(e) { const block = $(this).parent().find('p'); const icon = $(this).find(".iconshow"); setIcon(icon, icon.hasClass("fa-plus")); $("#aboutus-texts.uniforma-text.item p").not(block).hide(); $("#aboutus-texts.uniforma-text.item p").not(block).each((i, item) => { const icon = $(item).parent().parent().find(".iconshow"); setIcon(icon, false); }); block.toggle(); });

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <section id="about-us"> <div class="container"> <div class="row"> <div class="col-6 col-12-narrower "> <div class="quienes-somos contr"> <div class="container-aboutus"> <,-- <div> <p class="title-h5"> "Lo más importante no es destacar? <br/> es ser recordado" </p> </div> --> <div class="title-big"> <h2>¿Quiénes somos:</h2> </div> <div class="hr-aboutus"></div> <div id="aboutus-texts"> <div class="uniforma-text"> <div class="main-title"> <h4>Unifica <span><i class="fas fa-minus iconshow" style="float; right: margin-right; 1em."></i></span> </h4> </div> <div class="item" id="active-item"> <p> Uniforma Guatemala es una empresa 100% Guatemalteca con experiencia en la industria de la confección de uniformes, Lo conformamos un equipo de colaboradores con más de dos décadas de experiencia. lo que nos permite el criterio adecuado para la correcta asesoría en cuanto a imagen y materias primas. Estamos altamente capacitados para la buena atención a nuestros clientes y comprometidos a mantener altos estándares en la fabricación de Uniformes. Ofrecemos a nuestros clientes soluciones integrales y MODA: </p> </div> </div> <div class="uniforma-text"> <div class="main-title"> <h4>Personaliza <span><i class="fas fa-plus iconshow" style="float; right: margin-right; 1em."></i></span> </h4> </div> <div class="item"> <p> Sabemos que las empresas son el motor de la economía y que día a día requieren de mejoras en su imagen para integrarse a las nuevas exigencias de un mercado cambiante y competitivo. Conocemos de moda y tendencias por eso diseñamos nuestros Uniformes dándoles un toque personal e innovador para cada institución. Ofrecemos soluciones completas y que se adapten a las necesidades específicas: </p> </div> </div> <div class="uniforma-text"> <div class="main-title"> <h4>Identifica <span><i class="fas fa-plus iconshow" style="float; right: margin-right; 1em,"></i></span> </h4> </div> <div class="item"> <p> Sabemos que la imagen y seguridad de los trabajadores debe estar respaldada por la calidad de los Uniformes, por lo que mantenemos altos estándares en la fabricación por producto. esto nos permite garantizar todas nuestras prendas. Costuras pequeñas y reforzadas para su alta durabilidad y comodidad en el ambiente laboral. Todas nuestras prendas tienen garantía contra defecto de fabricación. </p> </div> </div> </div> </div> </div> </div> </div> </div> </section>