Image-enlarge in jquery accordion

Question

I am trying to create an accordion with jquery. Now I have reached a problem and that is can´t figure out how to enlarge the image of the separate slide. If the first article is clicked it works, but when you click the next article the image of the first stays in the enlarged size. Here is my jquery code:

$(document).ready(function() {

        $(function () {
        $(".news").siblings("span").click(function () {
            $(".news").slideUp(200, function() {

                $(this).siblings(".news").toggle(500);

            });

            $(this).siblings(".news").toggle(500);
                $('#test').addClass('article').siblings('#headline').removeClass('article');

        });
    });



});

Here is my entire code DEMO. Hopefully someone can help me.

score 1 · Answer 1 · answered Feb 05 '13 at 15:15

One of the main rules of valid HTML, afaik is not to use the same ID for more than one element. (http://www.w3schools.com/tags/att_global_id.asp)

That aside, it's very easy to fix your problem by using correct selectors:

$('.foto').removeClass('article');
$(this).children('.foto').addClass('article');

see here: http://jsfiddle.net/rb7MK/4/

Image-enlarge in jquery accordion

1 Answers1