$(document).ready(function() {
    $(".accordionContent").hide();
    $('<img src="images/arrow_accordionRight.gif" class="arrow" />').insertAfter('a h2');
    $("a h2").click(function() {
        if ($(this).is(".active")) {
            $(this).toggleClass("active");
            $('.arrow.active').attr('src', 'images/arrow_accordionRight.gif'); // change the image src of the current ACTIVE image to have an INACTIVE state.
            $(this).parent().next(".accordionContent").slideToggle();
            return false;
        } else {
            $(".accordionContent:visible").slideUp("slow"); // close all visible divs with the class of .content
            $("h2.active").removeClass("active");  // remove the class active from all h1's with the class of .active
            $(this).toggleClass("active");
            $('.arrow.active').attr('src', 'images/arrow_accordionRight.gif'); // change the image src of the current ACTIVE image to have an INACTIVE state.
            $(".arrow").addClass('active');
            $(this).siblings('.arrow.active').attr('src', 'images/arrow_accordionDown.gif'); // change the image src of the new active image to have an active state.
            $(this).parent().next(".accordionContent").slideToggle();
            return false;
        }
    });

    $(".arrow").click(function() {

        var h2 = $(this).parent().find("h2");

        if ($(h2).is(".active")) {
            $(h2).toggleClass("active");
            //$('.arrow.active').attr('src', 'images/arrow_accordionRight.gif'); // change the image src of the current ACTIVE image to have an INACTIVE state.
            $(this).attr('src', 'images/arrow_accordionRight.gif');
            $(h2).parent().next(".accordionContent").slideToggle();
            return false;
        } else {
            $(".accordionContent:visible").slideUp("slow"); // close all visible divs with the class of .content
            $("h2.active").removeClass("active");  // remove the class active from all h1's with the class of .active
            $(h2).toggleClass("active");
            //$('.arrow.active').attr('src', 'images/arrow_accordionRight.gif'); // change the image src of the current ACTIVE image to have an INACTIVE state.
            $('.arrow.active').attr('src', 'images/arrow_accordionRight.gif');
            $(this).addClass('active');
            $(h2).siblings('.arrow.active').attr('src', 'images/arrow_accordionDown.gif'); // change the image src of the new active image to have an active state.
            $(h2).parent().next(".accordionContent").slideToggle();
            return false;
        }

    });

});