Swap css class

I would like to swap classes in two links using jQuery. I got a HTML code like:

<div class="showHide1">
   <a id="aaa" class="show">AAA</a>
   <a id="bbb" class="hide">BBB</a>
</div>

<div class="showHide2">
   <a id="aaa" class="show">AAA</a>
   <a id="bbb" class="hide">BBB</a>
</div>

and a simple .css file :

.show {
    display: block;
}

.hide {
    display: none;
}

Now I want to swap classes in both links after clicking somewhere on the "showHide" div.

$('#showHide1').click(function() {
    if ($("#aaa").hasClass('show')) {
        $("#aaa").attr("class","hide");
    }
    else {
        $("#aaa").attr("class","show");
    }

    if ($("#bbb").hasClass('hide')) {
        $("#bbb").attr("class","show");
    }
    else {
        $("#bbb").attr("class","hide");
    } `

I'm sure there is a better way to solve this problem, because this only works for "showHide1" div, and I have to copy almost the same c开发者_C百科ode to get it working for a "showHide2" div. Could anyone show me a better solution?

Thanks

Dawid

To expand of cdeszaq's answer, instead of having .show and .hide only use .hide then you can use the following:

HTML:

<div id="showHide1" class="showHide">
   <a id="aaa">AAA</a>
   <a id="bbb" class="hide">BBB</a>
</div>

<div id="showHide2" class="showHide">
   <a id="aaa">AAA</a>
   <a id="bbb" class="hide">BBB</a>
</div>

CSS:

.hide {
    display: none;
}

JS:

$('.showHide').click(function() {
   $('a', this).toggleClass('hide'); //I had inverted my selector and context earlier, this is correct
});

Use .toggleClass() instead of checking if the class is there, and then either adding or removing it. .toggleClass() already takes care of that logic for you.

Your code would be:

$('#showHide1').click(function() {
    $("#aaa")
        .toggleClass("hide")
        .toggleClass("hide");
    $("#bbb")
        .toggleClass("hide")
        .toggleClass("hide");
});

Note: This assumes that the show and hide classes start off in the correct state.

I think youve got you id's and classes mixed up try this html:

<div id="showHide1">
   <a class="show aaa">AAA</a>
   <a class="hide bbb">BBB</a>
</div>

<div id="showHide2">
   <a class="show aaa">AAA</a>
   <a class="hide bbb">BBB</a>
</div>

js:

$('#showHide1, #showHide2').click(function() {
    var a_showing = $('.aaa.show', this);
    var a_hiding  = $('.aaa.hide', this);
    var b_showing = $('.bbb.show', this);
    var b_hiding  = $('.bbb.hide', this);
    a_showing.addClass('hide').removeClass('show')
    a_hiding.addClass('show').removeClass('hide')
    b_showing.addClass('hide').removeClass('show')
    b_hiding.addClass('show').removeClass('hide')
});

fiddle: http://jsfiddle.net/maniator/qMBRq/

This is how I would do it.

HTML

<div class="showhide">
   <a id="aaa1" class="show">AAA</a>
   <a id="bbb1" class="hide">BBB</a>
</div>

<div class="showhide">
   <a id="aaa2" class="show">AAA</a>
   <a id="bbb2" class="hide">BBB</a>
</div>

JavaScript

$(function() { 
    $('a.hide').hide();
    $('div.showhide').click(function() {
        $(this).children('a').toggle();
    });
});

This way, if the user doesn't have JavaScript enabled, they'll still be able to see everything. It may cause a flash of unstyled content (not exactly, but basically) since you're adding the hide after the DOM is ready via JavaScript. Now, that may or may not be important for you so you'll have to decide.