Saturday, 31 August 2013

Repetitive .toggleClass problems

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