JQuery to show a div with same class

Question

I made a simple jQuery to show a div with same class when clicking a link by referring to following code at http://jsfiddle.net/6GvE6/6/ . (You can see the code modified by me at http://jsfiddle.net/UpX3L/1717/ )

$('[id^="wrapper"]').on('click', function(e) {
    e.preventDefault();
    $('.wrap > div').hide();

    $('.'+ this.id).show();
});

Both seem to work in JSFiddle, but when I tried to use them in my WordPress blog, they did not work.

Answer 1

Yes inspect your code. Check in console, if it is '$ is undefined' error.

Replace '$' with 'jQuery' in your code.

This is the standard for WordPress

Answer 2

Here is the final version:

$('[id^="wrapper"]').on('click', function(e) {
    e.preventDefault();
    var id = this.id;
    $('.wrap > div').each(function() {
        if(!$(this).hasClass(id)) {
            $(this).hide();
        }
    });

    $('.'+ this.id).slideToggle('slow');
});

demo