Question

I’m having a couple problems trying to add/remove a class from links and their siblings. I have 3 groups of links contained in <div class="collapse_content"> ... </div>. I was able to get the jQuery to add and remove the ‘Selected” class from the links in the same container, but if I select a link that is in another container (group) then the previous selected link wont remove its class.

Each link in the groups are loading a page into an iframe, so they are all static links. I also have a collapse toggle function in jQuery above each group of links.

Basically, I’m wondering if someone could help me figure out why the jQuery wont remove the ‘selected’ class from the previous link that is in a different group from the newly selected link.

Any help/suggestions are appreciated. Thank you in advance.

Here’s the code I have so far.

–jQuery–

$(function() {

 //Add 'selected' class to A tag within class collapse_content
$('.collapse_content a').on('click', function(e){
 $(this).addClass('selected').siblings().removeClass('selected');
 $(this).find('.collapse_content a').removeClass('selected');
});

//toggle the componenet with class collapse_tab
$(".collapse_tab").click(function() {
 $(this).next(".collapse_content").slideToggle(500);
});
});​

–HTML–

<div class="collapse_tab">Group 1</div>
    <div class="collapse_content">
        <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br>
        <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br>
        <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br>
        <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br>
    </div>

<div class="collapse_tab">Group 2</div>
    <div class="collapse_content">
        <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br>
        <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br>
        <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br>
        <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br>
    </div>

<div class="collapse_tab">Group 3</div>
    <div class="collapse_content">
        <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br>
        <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br>
        <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br>
        <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br>
    </div>

<div class="collapse_tab">Group 4</div>
    <div class="collapse_content">
        <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br>
        <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br>
        <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br>
        <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br>
    </div>

–CSS–

.collapse_tab {
    text-decoration:none;
    font-weight:bold;
    background-color:#0cf;
    color:#FFF;
    font-size:11px;
    padding: 2px;
    margin:0px;
    text-align:center;
    border:1px solid #09f;
    cursor: pointer;
}

.collapse_content {    
    font:Verdana, Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    font-size: 10px;
    background-color:#0cf;
    border:#fff 1px solid;
}​

Answer 1

Try this

$(function() {

 //Add 'selected' class to A tag within class collapse_content
$('.collapse_content a').on('click', function(e){
    $('.collapse_content a').removeClass('selected');
    $(this).addClass('selected');
});

//toggle the componenet with class collapse_tab
$(".collapse_tab").click(function() {
    $(this).next(".collapse_content").slideToggle(500);
});
});​