Custom Accordion with arrows

问题

I have a custom accordion with the following code;

$('h2.expand').next('div').not(':first').hide()
    $('h2.expand').click(function () {

        $(this).next('div').toggle();
        $(this).toggleClass('active');

    });

and markup

<h2 class="expand">Your ASC</h2>
<div>
...
</div>

On page load the first div is open, but the arrowhead is in the closed position (pointing right).

However I have a small problem, whereby the arrowhead on the first div is in the closed position and in the open position when the accordion is closed, essentially the reverse of what I want..!

How can I edit my code so the arrowhead turns to the right when the h2.expand is clicked?

Thanks in advance..

来源：https://stackoverflow.com/questions/10950489/custom-accordion-with-arrows