There's multiple issues with the code quoted below...
1) you have this selector: $('[class^=toggle-item]")
but there is no sign of anything in the HTML shows that has any class
name that starts with "toggle-item"
2) related to #1, the attribute "class" is *not* a simple string to
all browsers, you cannot, well should not, do that selector
example:
http://jsbin.com/azeve/edit (code)
http://jsbin.com/azeve (run)
works in FF because it will treat it as a string, but IE doesn't (and
"One" and "Two" don't get colored yellow
I'd guess by your latest code using "className" in there that you ran
across that fact
You're best off to use a common class across all togglable items and
if you need to differentiate from each other, use the <div>'s
"id" (that's why it exists)
then you can say
$(".toggle-item") and that will work cross browser and consistantly
On Dec 30, 10:43 am, Erik <eriks...@mac.com> wrote:
> Not sure where, but this is it...
>
> Still doesn't work.
>
> <!DOCTYPE html>
> <html dir="ltr" lang="en-CA">
> <script src="/src/js/jquery/core/jquery-1.3.2.min.js" type="text/
> javascript"></script>
> <script type="text/javascript">
> $(document).ready(function() {
> $('[class^=toggle-item]').hide();
> $('[class^=link]').click(function() {
> var $this = $(this);
> var x = $this.attr("className");
> $('.toggle-item-' + x).toggle();
> return false;});
> });
>
> </script>
>
> <body>
>
> <div class="SomeOtherClass"> foo </div>
>
> <a href="#" class="SomeClass">More Details</a>
>
> sasasa
>
> <div class="SomeOtherClass"> foo </div>
>
> <a href="#" class="SomeClass">More Details</a>
>
> </body>
> </html>
