Repetitive .toggleClass problems
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.
 
No comments:
Post a Comment