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 code to get it working for a "showHide2" div. Could anyone show me a better solution?

Thanks

Dawid

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 code to get it working for a "showHide2" div. Could anyone show me a better solution?

Thanks

Dawid

• javascript
• jquery
• class
• html

Share Improve this question Follow edited May 5, 2011 at 18:52 Jeremy 22.4k44 gold badges7070 silver badges8181 bronze badges asked May 5, 2011 at 18:50 DawidDawid 65411 gold badge1414 silver badges3030 bronze badges 2

• 2 Side note: ids on a page should be unique. – Jeremy Commented May 5, 2011 at 18:55
• 1 I see the only difference between your classes is the display. If this is all your trying to do, you could use jQuery's .show() and .hide() methods (or fadeIn, fadeOut, etc.) if not, the above two answers have got it nailed. – Thomas Shields Commented May 5, 2011 at 19:00

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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/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.