CODEWITHSUNDEEP
javascriptjquerycss
John Bale
John Bale

Reputation: 179

hide link multiple times - jquery

I have two links. One is displayed and the other one is hidden. After I click the first link, it should disappear and the second one should display. After I click the second one like before the first one should appear in her place.

This is my code:

HTML

<a class="link-one" href="javascript:void(0)" rel="do-2">Link one</a>
<a class="link-two" href="javascript:void(0)" rel="do-3">Link two</a>

jQuery

$(".link-one").live('click',function(){
    //some actions
    $(this).hide();
    $(".link-two").show().on('click',function(){
        //some actions
        $(this).hide();
        $("link-one").show();
    });
});

CSS 

.link-two{ display: none;}

Could someone please give me a hint on what am I doing wrong ?

Upvotes: 0

Views: 77

Answers (3)

j08691
j08691

Reputation: 208002

$('.link-one,.link-two').click(function () {
    $('.link-one,.link-two').toggle()
});

jsFiddle example

Upvotes: 1

Patsy Issa
Patsy Issa

Reputation: 11303

For starters live is deprecated, use .on instead, your first selector is missing the .

So without further ado:

$(".link-one, .link-two").on('click',function(){
    $(".link-one, .link-two").toggleClass('hidden');
});

.hidden
{
display:none;
}

And start off with the class hidden on your link-two.

Upvotes: 1

tymeJV
tymeJV

Reputation: 104795

A better solution, give both links a common class, then just use one function (lets use the class alterLink)

$(".alterLink").click(function() {
    /*
    $(this).hide();
    $(".alterLink").not(this).show();
    */

    //Per comments, this is easier (assuming only 2 links)
    $(".alterLink").toggle();
});

Demo: http://jsfiddle.net/zDQde/

Upvotes: 3

Related Questions