So I have content boxes that close and expand when you click an arrow. The content box has two classes for telling whether it is open or closed (.box_open, .box_closed). A hover function is assigned to box_open so when it is open and you hover over the header, the arrow appears. However, I don't want this to happen when the box is closed, as I want to arrow to remain visible when the box is closed. When the box closes, the box_open class is removed, but the function assigned to that class still works.

Here's the jquery code for the two functions. You can also see them in the head of the demo below.

    // Display Arrow on Box Header Hover

        $(".box_open").hover(
            function () {
                $(this).find('a').show();
            }, 
            function () {
                $(this).find('a').hide();
            }
        );

    // Open and Close Boxes:

        $(".box_header a").click(
            function () {
                $(this).parent().next('.box_border').stop().toggle();
                $(this).parent().toggleClass("box_open");
                $(this).parent().toggleClass("box_closed");
                return false;
            }
        );

Can anyone take a look at what the problem is?

Here's the demo url: Demo Url