CODEWITHSUNDEEP
javascriptjquery
Erwin van Ekeren
Erwin van Ekeren

Reputation: 730

Toggle class on click

I am building a FAQ, behind every question there is a '+' icon, after clicking on it the answer appears and the icon changes to a '-' icon. The problem is that when you click on the next question the icon of the previous question doesn't toggle back to the original/previous/other icon.

See example:

https://codepen.io/pixelarchitect/pen/eXLEJV

HTML

<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>

<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>

<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>

Javascript

$('.faq span').hide();

$('.faq div.question').click(function(e){

  e.preventDefault();

  var $this = $(this).parent().find('span');
  $(".faq span").not($this).hide();
  $this.toggle();

  $(this).find('svg').toggleClass('fa-plus fa-minus')

});

I'm using jQuery and the free version of FontAwesome for this example.

Upvotes: 0

Views: 153

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Using a quite similar logic as your show/hide, you can restore all svg back to plus signs, except the clicked one... See below.

$('.faq span').hide();

$('.faq div.question').click(function(e){

    e.preventDefault();
    
    var $this = $(this).parent().find('span');
    $(".faq span").not($this).hide();
    $this.toggle();
    
    // This line turns all fa-minus into fa-plus except the clicked one
    $('.faq svg').not($(this).find('svg')).removeClass('fa-minus').addClass('fa-plus');
    
    $(this).find('svg').toggleClass('fa-plus fa-minus');
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>

<div class="faq">
  <div class="question">Q <i class="fas fa-plus"></i></div>
  <span class="answer">A</span>
</div>

<div class="faq">
  <div class="question">Q <i class="fas fa-plus"></i></div>
  <span class="answer">A</span>
</div>

<div class="faq">
  <div class="question">Q <i class="fas fa-plus"></i></div>
  <span class="answer">A</span>
</div>

Upvotes: 2

fdomn-m
fdomn-m

Reputation: 28611

You can find all the font-awesome svgs and use .addClass("fa-plus").removeClass("fa-minus") - excluding the current div's parent:

$('.faq span').hide();

$('.faq div.question').click(function(e) {

  e.preventDefault();

  var div = $(this).parent();
  var $this = div.find('span');
  $(".faq span").not($this).hide();
  $(".faq").not(div).find("svg")
    .addClass("fa-plus")
    .removeClass("fa-minus");
  $this.toggle();

  $(this).find('svg').toggleClass('fa-plus fa-minus')

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<div class="faq">
  <div class="question">Q <i class="fas fa-plus"></i></div>
  <span class="answer">A</span>
</div>
<div class="faq">
  <div class="question">Q <i class="fas fa-plus"></i></div>
  <span class="answer">A</span>
</div>
<div class="faq">
  <div class="question">Q <i class="fas fa-plus"></i></div>
  <span class="answer">A</span>
</div>

Updated codepen: https://codepen.io/anon/pen/EMevMz

Upvotes: 1

Related Questions