JQuery Toggle Icon with Various Icons

Question

I'm currently trying to customize the menu using the icon switcher, so when I click on one icon, it changes to a cross, and then when this cross is pressed, it goes back to the original. I got this far, but when I click on the new image, I need the old reset icon, and the cross should be applied to the new icon.

Here is how far I got:

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingFive">
        <a class="collapsed faq-links">
            <i id="icon" class="fa fa-info-circle fa-3x"></i>
        </a>
    </div>
</div>
<br />
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading13">
        <a class="collapsed faq-links">
            <i id="icon" class="fa fa-heartbeat fa-3x"></i>
        </a>
    </div>       
</div>
<br />
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingFour">
        <a class="collapsed faq-links" >
            <i id="icon" class="fa fa-comments fa-3x"></i>
        </a>
    </div>
</div>

JavaScript:

$('.faq-links').click(function(){
    var collapsed=$(this).find('i').hasClass('fa-info-circle');
    $('.faq-links').find('i').removeClass('fa-times');
    $('.faq-links').find('i').addClass('fa-info-circle');
    if(collapsed)
        $(this).find('i').toggleClass('fa-info-circle fa-3x fa-times fa-3x')
});

I installed JSFiddle to show that it works https://jsfiddle.net/BenjiBaird/yycf2jb8/1/

Therefore, when I click on the information circle, the cross is applied, and when I click on the other, this cross is deleted. How can I apply this to every icon.

Any help would be appreciated, hope I understood.

Answer 1

,

<a class="collapsed faq-links" data-icon-name="fa-info-circle">
  <i id="icon" class="fa fa-info-circle fa-3x"></i>
</a>

"fa-times"

JSFiddle, , . , .find('i'), , .

$('.faq-links').click(function() {
  if ($(this).find('i').hasClass('fa-times')) { //then change back to the original one
    $(this).find('i').removeClass('fa-times').addClass($(this).data('icon-name'));
  } else {
    $('.faq-links').each(function(){ //Remove the cross from all other icons
        if($(this).find('i').hasClass('fa-times')) {
        $(this).find('i').removeClass('fa-times').addClass($(this).data('icon-name'));
      }
    });
    $(this).find('i').addClass('fa-times').removeClass($(this).data('icon-name'));
  }
}); 

Answer 2

"" , reset , , "" ( ) . :

$('.faq-links').click(function(){
        var notCollapsed = $(this).find('i').hasClass('fa-times');              

        //Remove crosses from all buttons
        $('.faq-links').find('i').removeClass('fa-times');          

        //Reset the default icon for each button 
        $('.faq-links:eq(0)').find('i').addClass('fa-info-circle');
        $('.faq-links:eq(1)').find('i').addClass('fa-heartbeat');
        $('.faq-links:eq(2)').find('i').addClass('fa-comments');

        //Draw the cross if needed
        if(!notCollapsed) $(this).find('i').attr("class",'fa fa-times fa-3x');
});

https://jsfiddle.net/8odoros/yycf2jb8/10/

Answer 3

, fa-times fa-heartbeat, fa-info-circle fa-comments, .

$('.faq-links').click(function() {
  var blockI = $(this).find('i');
  if(blockI.hasClass('fa-times')) {
    // remove fa-times class if the element already has it
    blockI.removeClass('fa-times');
  }
  else {
    // clean the classes from other elements that might have it
    $('.faq-links i').removeClass('fa-times');
    // adds it on the clicked element
    blockI.addClass('fa-times');
  }
});

css / , , fa-times "" . , . , script .

Answer 4

HTML:

<i id="icon" class="fa fa-heartbeat fa-3x" data-icon="fa-heartbeat"></i>

HTML:

. , . , id DOM Element, class.

JS:

// jQuery safety
(function($) {

  // DOM ready
  $(function() {

    // icons
    var $icons = $('.faq-links');
    $icons.on('click', function(e) {

      // variables
      var $this = $(this);
      var $icon = $this.find('i');

      // iconName taken from data-icon attribute
      var iconName = $icon.data('icon');

      // close icon
      var closeIconName = 'fa-times';

      // prevent default browser behaviour, just in case
      e.preventDefault();

      // handle state
      if ($icon.hasClass(closeIconName)) {
        $icon.removeClass(closeIconName).addClass(iconName);
      } else {
        $icon.addClass(closeIconName).removeClass(iconName);
      };
    });
  });
})(jQuery);

JS:

. , - . $icons - , . click. $icons $this . $icon <i></i> , .

iconName , .

// handle state. , $icon , closeIconName ( ), "". , "" "" , , closeIconName, iconName, ( data). , closeIconName.

: fa-close.

EDIT: JSFiddle: https://jsfiddle.net/0fy2po3b/1/