Click handler calling other click handlers?
Can someone point out where I'm going wrong with this? I have a set of divs all with headers of class "shrink-on-start shrinkable", and an Expand All link with class "expand-all"
I've set up two click events - when a "shrinkable" is clicked, it should next().slideToggle() - which works fine on its own. When "expand-all" is clicked, it should next().slideToggle() on
all "shrink-on-start" objects (not all "shrinkable" objects, as elements on the page sidebar also use this class), which also works fine on its own.
However, when both bits of code exist, clicking a "shrinkable" seems to call
both $(".shrinkable").click(...) and $("expand-all").click(...). Which is a bit weird. It does make for a nice visual effect, but makes my page a bit impossible to use.
Here's the code:
- $(document).ready(function() {
- //collapse all when page loads
$(".shrink-on-start").next().hide();
- // .expand-all click handler
$(".expand-all").click(function() {
$(".shrink-on-start").next().slideToggle();
});
- // .shrinkable click handler
$(".shrinkable").click(function() {
$(this).next().slideToggle();
});
});
- ...
- <div><span class="alpha-char expand-all"><a href="#">Expand All</a></div>
- <div class="component grid_9">
<h1 class="component-header shrinkable shrink-on-start">A</h1>
<div>
<p>Indicator</p>
<p>Indicator</p>
<p>Indicator</p>
</div>
</div>
<div class="clear"></div>
- <a name="B" /><div class="component grid_9">
<h1 class="component-header shrinkable shrink-on-start">B</h1>
<div>
<p>Indicator</p>
<p>Indicator</p>
<p>Indicator</p>
</div>
</div>
<div class="clear"></div>
- <a name="C" /><div class="component grid_9">
<h1 class="component-header shrinkable shrink-on-start">C</h1>
<div>
<p>Indicator</p>
<p>Indicator</p>
<p>Indicator</p>
</div>
</div>
<div class="clear"></div>
- (etc)
It's probably some obvious oversight. Can anyone spot it?
If not, is it possible that IE7 is causing the bug? It's all I'm armed with at work, unfortunately.