im facing issues with multiple toggling on IE. it works fine with all other browser except IE (-_-). below is a abstract of my code.basically im only able to get an popup alert when i clicked on the first hyperlink. there were no popup when i clicked on subsequent links
$(document).ready(function(){
$("a#toggleFruitSlideBox").click(function() {
alert($(this).text());
return false;
});
});
<div id="bodykit_slidebox">
<div style="padding:5px 0px 0px 5px;">
<a id="toggleFruitSlideBox" href="#" class="nav2">apple</a>
<a id="toggleFruitSlideBox" href="#" class="nav2">orange</a>
<a id="toggleFruitSlideBox" href="#" class="nav2">DURIAN</a>
<a id="toggleFruitSlideBox" href="#" class="nav2">papaya</a>
</div>
You have multiple elements with the same id it is an invalid HTML!
Check my answer here:
jQuery id selector works only for the first element
The only difference between your code and the code in the other question is that you use a bad selector:
$("a#toggleFruitSlideBox")
Which cause jQuery not to use the document.getElementById, so this is why it works in other browsers.
From the jQuery docs:
For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match.
Remove the duplicated id and use other selector like the class selector.
Looks like the problem is that all your Id's are the same. Id's are supposed to be unique. Either use a class or just use the a selector if you don't care if it fires on all a tags.
