jquerytoggleclass

Change icon after click (others icons not change)

I need after click with jQuery change icon from plus to minus with toggle class now I have problem that after clicked all "span" changed icon.

// FAQ
$('#content-in > article > div > ul > li > p').hide();
$('#content-in > article > div > ul > li > h3').click(function(e) {
  e.preventDefault();
  // skrýt všechny spany
  var $this = $(this).parent().find('p');
  $('#content-in > article > div > ul > li > p').not($this).hide();
  // rozjetí textu
  $this.toggle("fast", "swing");

  // obarvení pozadí + další změny po kliknutí a rozjetí (u ostatních elementů se tato vlastnost neaplikuje)
  var tittle = $("#content-in > article > div > ul > li > h3");
  $(tittle).toggleClass('activeLol');
  $(tittle).not(this).removeClass('activeLol');

  var $plus_minus = $('#content-in > article > div > ul > li > h3 > span');
  $plus_minus.toggleClass('fa-minus').toggleClass('fa-plus');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="Accordion mt30">
  <li class="Accordion-item">
    <h3 class="Accordion-item-title" style="text-align: left;"><span class="fa fa-plus"> </span>1. Pokud je vybrané zboží momentálně ve statusu objednáno u dodavatele či vyprodáno, co to znamená ?</h3>
    <p class="Accordion-item-content" style="display: none;">Zboží, které je momentálně ve statusu objednáno u dodavatele, bohužel není k dispozici. Produkty jsou objednány u našeho italského dodavatele s tím, že čekáme na jejich výrobu a následnou dopravu do České republiky. Dodací lhůta je však různě odlišná,
      zpravidla 2-3 týdny (v některých případech může být delší).</p>
    <p class="Accordion-item-content" style="display: none;">Zboží, které je momentálně ve statusu vyprodáno, je bohužel dlouhodobě nedostupné s tím, že jeho naskladnění zatím nemáme potvrzeno.</p>
  </li>
  <li class="Accordion-item">
    <h3 class="Accordion-item-title"><span class="fa fa-plus"> </span>2. Pokud si objednám zboží, které je momentálně skladem, jaká je dodací lhůta ?</h3>
    <p class="Accordion-item-content" style="display: none;">Při objednání produktů, které jsou na našich webových stránkách „Skladem“ je dodací lhůta zpravidla dva až čtyři pracovní dny.</p>
  </li>
</ul>

Solution

  • The issue is because you're selecting all the h3 span elements. Instead you can use DOM traversal to find the one related to the clicked h3 by using the this keyword within the click event handler. Try this:

    var $plus_minus = $(this).find('span').toggleClass('fa-minus fa-plus');
$('h3 span').not($plus_minus).removeClass('fa-minus').addClass('fa-plus');