Toggle images when clicking on a set of anchor elements

Question

I need to hide and show some images depending on where the user clicks. The .img-active class indicates the image displayed by default, and the .img-inactive class indicates the image hidden. When you click on the anchor those images must swap(show one and hide the another). Obviously, if you click on another anchor, the last one you clicked must be set again to its default state.

But I am having an issue right now with that, the functionality only works in the first click on every anchor. When try the second time, you will see it is broken.

In the video you will see that every circle has a border after you click the second time, I did that just to differentiate the if conditions.

I have recorded this video!

This is the html that you may see in the video:

    <a class="fig-8" data-tab="tab1">
        <img src="path/researchicon-x.png" alt="" class="pulse img-active">
        <img src="path/selected-x.png" alt="" class="img-inactive">
    </a>

    <a class="fig-8" data-tab="tab2">
        <img src="path/WideRange.png" alt="" class="pulse img-active">
        <img src="path/selected-x.png" alt="" class="img-inactive">
    </a>

    <a class="fig-8" data-tab="tab3">
        <img src="path/SSI_toolbox.png" alt="" class="pulse img-active">
        <img src="path/selected-x.png" alt="" class="img-inactive">
    </a>

    <a class="fig-8" data-tab="tab4">
        <img src="path/PricingIcon.png" alt="" class="pulse img-active">
        <img src="path/selected-x.png" alt="" class="img-inactive">
    </a>

Here is the JS function:

var iconTabs = function () {
    $('.tabs1 a').on('click', function() {
        var $tabContainer = $(this).parents('.tab-container');
        var tabId = $(this).data('tab');
        $tabContainer.find('.icons-tabs a').addClass('inactive');
        $(this).removeClass('inactive');


        // that functionality begins here!!!
        $('.tabs1 a').not(this).find('.img-inactive').hide();
        $('.tabs1 a').not(this).find('.img-active').show();

        var active;
        if ($(this).hasClass('selected-shown')) {
            active = '.img-inactive';
            $(this).find('.img-active').css('border', '5px solid green');
        } else {
            active = '.img-active';
            $(this).find('.img-active').show();
            $(this).find('.img-active').css('border', '4px solid red');
        }

        var show;
        if ($(this).hasClass('selected-shown')) {
            show = '.img-active';
            $(this).find(show).css('border', '3px solid blue');
        } else {
            show = '.img-inactive';
            $(this).removeClass('selected-shown');
            $(this).find('.img-active').css('border', '6px solid orange');
        }

        $(this).addClass('selected-shown').find(show).show();
        $(this).find(active).hide();

    });
};

That .selected-shown is just a flag I am adding to the parent element to check the anchor I a have clicked.

Any suggestions?

Answer 1

Try this and please read comments in the code

See the code in action

$('.tabs1 a').on('click', function() {
    var ThisIt = $(this),                              // this
        All_a_but_this = $('.tabs1 a').not($(this)),   // all <a> tags but this
        Active = $(this).find('img.img-active').is(':visible'), // return true if the img with img-active class is visible
        Inactive = $(this).find('img.img-inactive').is(':visible'); // return true if the img with img-inactive class is visible
    // return all <a> but this to default
    All_a_but_this.each(function(){     // loop through other <a>
        $(this).removeClass('selected-shown');    // remove selected-shown
        $(this).find('img.img-active').show();    // show active image
        $(this).find('img.img-inactive').hide();  // hide inactive image
    });
    // swap
    if(Active === true){   // if active image is visible
      $(this).find('img.img-active').hide();     // hide active image
      $(this).find('img.img-inactive').show();   // show inactive image
    }
    if(Inactive === true){  // if inactive image is visible
      $(this).find('img.img-active').show();    // show active image
      $(this).find('img.img-inactive').hide();   // hide active image
    }

    $(this).toggleClass('selected-shown');  // toggle selected-shown class
}).filter('.selected-shown').click();

.img-active{
  display: block;
}
.img-inactive{
  display : none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs1">
  <a class="fig-8" data-tab="tab1">
      <img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active">
      <img src="http://via.placeholder.com/200x150" alt="" class="img-inactive">
  </a>

  <a class="fig-8" data-tab="tab2">
      <img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active">
      <img src="http://via.placeholder.com/200x150" alt="" class="img-inactive">
  </a>

  <a class="fig-8" data-tab="tab3">
      <img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active">
      <img src="http://via.placeholder.com/200x150" alt="" class="img-inactive">
  </a>

  <a class="fig-8 selected-shown" data-tab="tab4">
      <img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active">
      <img src="http://via.placeholder.com/200x150" alt="" class="img-inactive">
  </a>
</div>

Answer 2

   Try this one.



<div id="gallery">
    <div class="main">
        <div class="big show"><!-- image / video here --></div>
        <div class="big"><!-- image / video here --></div>
        <div class="big"><!-- image / video here --></div>
    </div>

    <div class="thumbnails">
        <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    </div>

    $('.thumbnails a').on('click',function(){
       var eq = $(this).index();

       $('.main .big').removeClass('show');
       $('.main .big').eq(eq).addClass('show');
    });