jQuery toggle doesn't work

i like to toggle .toggle-item-(number here) with .link(number here). At the beginning all .toggle-items are closed. Only one toggle item should be shown at the same time. Every time a new toggle item opens an other open toggle item shoul开发者_开发技巧d close.

Link with code is here: http://jsfiddle.net/rAUqb/

Why does the jQuery code not work?

I've updated your code.

You were not getting the number correctly.

$(document).ready(function() {
    $('[class^=toggle-item]').hide();
    $('[class^=link]').click(function() {
        var x = $(this).attr("class").replace('link', '');
        $('[class^=toggle-item]:not(.toggle-item-'+x+')').hide();
        $('.toggle-item-' + x).toggle();
        return false;
    });
});

The value in x was the full class name ("link1", "link2", etc). I simply stripped out the "link" part to just have the number.

Updated Marc's code so it closes the others when clicking.

$(document).ready(function() {
    $('[class^=toggle-item]').hide();
    $('[class^=link]').click(function() {
        var $this = $(this);
        var x = $this.attr("class");
        var className = '.toggle-item-' + x.replace('link', '');
        $(className ).toggle();
        $('[class^=toggle-item]:not('+className +')').hide();
        return false;
    });
});

Would the Jquery accordion not work for you?

use attr("class") instead of attr("classname")