CODEWITHSUNDEEP
jquerytoggleclass
David
David

Reputation: 77

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>

Upvotes: 1

Views: 225

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

Get the relative icon to the clicked element

$('#content-in > article > div > ul > li > h3').click(function(e) {
  e.preventDefault();
$('h3 span').not($(this).find('span')).removeClass('fa-minus').addClass('fa-plus');//change all classes to fa-plus
$(this).find('span').toggleClass('fa-minus fa-plus');//change the current one 
});


// FAQ
$('ul > li > p').hide();
$(' ul > li > h3').click(function(e) {
  e.preventDefault();
  // skrýt všechny spany
  var $this = $(this).parent().find('p');
  $('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 = $(" ul > li > h3");
  $(tittle).toggleClass('activeLol');
  $(tittle).not(this).removeClass('activeLol');

  var $plus_minus = $(' ul > li > h3 > span');
  $('h3 span').not($(this).find('span')).removeClass('fa-minus').addClass('fa-plus'); //change all classes to fa-plus
  $(this).find('span').toggleClass('fa-minus fa-plus'); //change the current one 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337570

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

Upvotes: 1

Related Questions