Repetitive .toggleClass problems

Question

I have some repeating divs that I'm trying to .toggleClass multiple elements on and am having trouble pointing to the right ones without altering others.

Basically I have bunch of divs with the same ids and classes and I only want to toggle each to expand by clicking a link with the class "a_expander". I would like that to toggle the #result class between "a_collapse a_expand, as well as toggle the #resthumb between "rescellLc rescellLe" it looks like this

<div id="result" class="bg_fader scaler a_collapse">
        <div id="resthumb" class="scaler rescellLc">
           <img src="img/fine-fur-coat.png" />
        </div>
            <div class="rescellC">
                <div class="res_content_album-title">
                    <h><a class="a_expander">Fine Fur Coat</a></h>
                    <p>3 Tracks | September 2012</p>
                </div>
</div>
<div id="result" class="bg_fader scaler a_collapse">
        <div id="resthumb" class="scaler rescellLc">
            <img src="img/tunneling.png" />
        </div>
            <div class="rescellC">
                <div class="res_content_album-title">
                    <h><a class="a_expander">Tunneling</a></h>
                    <p>15 Tracks | July 2011</p>
                </div>
            </div>
</div>

and my js so far was

$('.a_expander').click(function () {
$(this).siblings('#result').toggleClass("a_collapse a_expand");
$(this).siblings('.resthumb').toggleClass("rescellLc rescellLe");
});

I was using the .parent() to get to the outer div but could not change the #resthumb only point to the #result. Hopefully this is not to confusing and someone can help. Much appreciated in advance.

Answer 1

Ok, lots of things here...

First:
I like the tunes from Emily Peal :).

Second:
I recommend that you consider restructuring your HTML -- the sample structure and style names are pretty confusing when trying to figure it out. If you are willing to restructure, I put together an example that does effectively accomplishes the same in a much cleaner way here:
http://jsfiddle.net/9PFps/2/ .
It's cleaner to just do the toggle in one place (for example at the album level) and let the children nodes leverage that to adjust their style. Take a look at the example and you'll see what I mean. BTW, I also added "Bang Bang" and some images for the covers to my example for the sake of completeness. :)
Here's the snippets:

HTML:

<div class="album notSelected">
    <div class="album_title">Fine Fur Coat</div>
    <div class="album_details">
        <div class="album_image">
            <img src="~/img/a3596975827_3.jpg" />
        </div>
        <div class="album_info">
            3 Tracks | September 2012
        </div>
    </div>
</div>    

<hr />
<div class="album notSelected" >
    <div class="album_title">Tunneling</div>
    <div class="album_details">
        <div class="album_image">
            <img src="~/img/a2007832660_3.jpg" />
        </div>
        <div class="album_info">
            15 Tracks | July 2011
        </div>
    </div>
</div>    

<hr />
<div class="album notSelected">
    <div class="album_title">Bang Bang</div>
    <div class="album_details">
        <div class="album_image">
            <img src="~/img/a3825495084_3.jpg" />
        </div>
        <div class="album_info">
            1 Track | January 2012
        </div>
    </div>
</div>    

JavaScript:

$(function() {
    $(".album").click(function() {

        if ($(this).hasClass("selected")) {
            //The "selected" album was clicked, just toggle it to "notSelected"
            $(this).toggleClass("notSelected selected");
        }
        else {
            //Set all albums to "notSelected" and just toggle the clicked one to "selected"
            $(".album").removeClass("selected notSelected");
            $(".album").addClass("notSelected");
            $(this).toggleClass("notSelected selected");
        }
    });
});

CSS:

.album {
    font-size: 15px;
    border-width: 2px;
    border-color: black;
    padding: 10px;
}

.album.notSelected{
    border-style: none;
}

.album.selected {
    border-style: solid;
}

.album_title{
    text-decoration: underline;
}

.album.selected .album_title {
    color: green;
    font-size: 30px;
}

.album.notSelected .album_details {
    display: none;
}

.album_image {
    padding: 10px;
}

Third:
Your existing HTML above isn't well-formed -- you are missing a closing div in your first result. This would lead to problems with jQuery selectors (and likely your layout), depending on what methods you're using.

Finally:
If you really want to use that existing structure, I put together an example of walking the DOM to the nodes whose classes you want to toggle, with some made up styles. You can find it here: http://jsfiddle.net/KSeLL/

Good luck!

Answer 2

First get rid of the duplicate IDs as the previous posters indicated. You cannot use the same ID more than once on a given page.

Next replace the calls to .siblings() with calls to .closest(). The #result divs are not siblings of the anchor tags. (siblings in jQuery means that two or more elements are children of the same parent container.) #result is an "ancestor" of the links (not a sibbling, not the parent. more like a great great great grandfather if you will). To get to #result from the anchor you have to go up multiple levels of the DOM. Use .closest() for that.