CODEWITHSUNDEEP
javascriptjquery
Reacting
Reacting

Reputation: 6123

How to toggle a class among some different elements?

In the html I have 2 images within the .fig-8 anchor.

.img-active = display: block

.img-inactive = display: none

HTML:

<div class="tabs1">
    <a class="fig-8" data-tab="tab1">
       <img src="/path.png" class="img-active">
       <img src="/selected.png" class="img-inactive">
    </a>

    <a class="fig-8" data-tab="tab2">
       <img src="/path1.png" class="img-active">
       <img src="/selected.png" class="img-inactive">
    </a>

    <a class="fig-8" data-tab="tab3">
       <img src="/path2.png" class="img-active">
       <img src="/selected.png" class="img-inactive">
    </a>
</div>

All I need is that when you click on the anchor, .img-active should be display: none and .img-inactive = display: block

As I am doing it in the js file:

$('.tabs1 a').on('click', function() {
    $(this).find('.img-active').hide();
    $(this).find('.img-inactive').show();
});

It is doing what I want but if you click on the second or third anchor, the images where I clicked are not getting to its original shape(the default image.).

Any suggestions?

Upvotes: 0

Views: 47

Answers (2)

Joseph Marikle
Joseph Marikle

Reputation: 78520

Couldn't this be achieved using CSS? You can use the :focus pseudo-class.

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

a:focus .img-inactive {display:block;}
a:focus .img-active {display:none;}
<div class="tabs1">
    <a class="fig-8" data-tab="tab1" href="#">
       <img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active">
       <img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive">
    </a>

    <a class="fig-8" data-tab="tab2" href="#">
       <img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active">
       <img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive">
    </a>

    <a class="fig-8" data-tab="tab3" href="#">
       <img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active">
       <img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive">
    </a>
</div>

Otherwise, it's also pretty easy to do with jQuery

$('.tabs1 a').on('click', function() {
    $('.tabs1 a .img-inactive').hide();
    $('.tabs1 a .img-active').show();
    $(this).find('.img-inactive').show();
    $(this).find('.img-active').hide();
});
.img-inactive,.img-active {float:left;}
.img-inactive {display:none;}
.img-active {display:block;}
<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" href="#">
       <img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active">
       <img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive">
    </a>

    <a class="fig-8" data-tab="tab2" href="#">
       <img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active">
       <img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive">
    </a>

    <a class="fig-8" data-tab="tab3" href="#">
       <img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active">
       <img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive">
    </a>
</div>

Upvotes: 2

VivekN
VivekN

Reputation: 1602

Can you try this:-

$('.tabs1 a').on('click', function() {
    $('.img-active').not(this).show();
    $('.img-inactive').not(this).hide();
    $(this).find('.img-active').hide();
    $(this).find('.img-inactive').show();
});

Upvotes: 1

Related Questions