CODEWITHSUNDEEP
jquerycss
LynnG195
LynnG195

Reputation: 23

Jquery two different links show same div, need both links to display active state when clicked

I have two different links that show a hidden div. I want to show the active state of both links when either link is clicked to reveal the hidden div.

This is my first jquery attempt, and I'm thinking I need to have two different link classes. Basically I'm just not sure where to go from here.

I'm use images for the links, but for simplicity, I've used text to show what I have so far: http://jsfiddle.net/hra00L0k/4/

Thank in advance for the help.

HTML 

<div id="1" class="number">
    <a class="link" href="#" rel="div1">Link 1</a>
    <a class="link" href="#" rel="div2">Link 2</a>
</div>

<br />

<div id="2" class="letter">
    <a class="link" href="#" rel="div1">Link A</a>
    <a class="link" href="#" rel="div2">Link B</a>
</div>

<div class="content" id="div1">
    <p>Link 1 and Link A open this box. I want both links to display their active css.</p>
    <a href="#" class="close">Close</a>
</div>
<div class="content" id="div2">
    <p>Link 2 and Link B open this box. I want both links to display their active css.</p>
    <a href="#" class="close">Close</a>
</div>

CSS

.number a{
color: #000000; 
}

.number a.active, 
.number a:hover {
    color: #FF0004;
    font-weight: bold;
}

.letter a{
    color: #000000; 
}

.letter a.active, 
.letter a:hover {
    color: #00BC10;
    font-weight: bold;
}

.content {
    display: none;
}

JQUERY

$(document).ready(function () {
    $('.link').click(function(e) {
        e.preventDefault();
        var content = $(this).attr('rel');
        $('.active').removeClass('active');
        $(this).addClass('active');
        $('.content').hide();
        $('#' + content).show();
    });
    $("a.trigger").click(function () {
        $(this).next(".content").slideToggle("slow");
    });
    $("a.close").click(function () {
        $(".content").hide("fast");
        $('.active').removeClass('active');
    });
});

Upvotes: 2

Views: 444

Answers (1)

malkassem
malkassem

Reputation: 1957

For sure that there will be many ways to do this. I chose the easiest, but here is the script that have:

$(document).ready(function () {
// Catch all clicks on a link with the class 'link'
$('.link').click(function(e) {
    // Stop the link being followed:
    e.preventDefault();
    // Get the div to be shown:
    var content = $(this).attr('rel');
    // Remove any active classes:
    $('.active').removeClass('active');
    // Add the 'active' class to this link:
    // replace this line //$(this).addClass('active');
    $('[rel="' + content + '"]').addClass('active');
    // Hide all the content:
    $('.content').hide();
    // Show the requested content:
    $('#' + content).show();
});

    $("a.trigger").click(function () {
        $(this).next(".content").slideToggle("slow");
    });

    $("a.close").click(function () {
        $(".content").hide("fast");
        $('.active').removeClass('active');
    });


});

See working jsFiddle

What I did basically is that I added a selector that finds all the links with the same attribute 'rel' value as the current only and set class to .active

Good Luck

Upvotes: 1

Related Questions