Remove added jquery active class after clicking on different menu item in accordion

Question

I have a problem where I have used Jquery to add an active class to an accordion menu item when the page loads. Now i would like to remove that active class when users navigate to a different menu heading. Here is the Javascript and HTML below. If you need more code let me know!:

JAVASCRIPT--------------------------------------------------------------------------------

<title>Untitled Document</title>
<link rel="stylesheet" href="/CoVPrototype/css/CoV_style.css" type="text/css" />
<script type="text/javascript" src="/CoVPrototype/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/CoVPrototype/js/jquery.easing.1.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {

    $('#accordion li').children('ul').hide();
    $('.history_heading:first').addClass('active').next().show();

    $('#accordion li').click(function () {
        $('#accordion li').children('ul').slideUp('fast');
        $('#accordion li > a').each(function () {
            if ($(this).attr('rel')!='') {
                $(this).removeClass($(this).attr('rel') + 'Over');
            }
        });
        $(this).children('ul').slideDown('fast');
        $(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over');
        return false;
     });
});
</script>

and here is the html:----------------------------------------------------------------------

<ul id="accordion">
    <li>
        <a href="#" class="history_heading" rel="history_heading">HISTORY</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="neighborhoods_heading" rel="neighborhoods_heading">NEIGHBORHOODS</a>
        <ul>
            <li><a href="#">Ridge</a></li>
            <li><a href="#">Local News</a></li>
            <li><a href="#">Local Events</a></li>
            <li><a href="#">Local Projects</a></li>
            <li><a href="#">Neighborhood Services</a></li>
            <li><a href="#">Area Information</a></li>
            <li><a href="#">Photo Gallery</a></li>
                <ul>
                    <li><a href="#">Park</a></li>
                    <li><a href="#">Downtown</a></li>
                    <li><a href="#">Downtown East</a></li>
                    <li><a href="#">Dunbar-South</a></li>
                    <li><a href="#">Park Place</a></li>
                    <li><a href="#">Fairway</a></li>
                    <li><a href="#">Woodland</a></li>
                    <li><a href="#">HSunrise</a></li>
                    <li><a href="#">Cedar</a></li>
                    <li><a href="#">Dale</a></li>
                    <li><a href="#">Arney</a></li>
                    <li><a href="#">Parkinson</a></li>
                    <li><a href="#">Lano</a></li>
                    <li><a href="#">Marle</a></li>
                    <li><a href="#">Mount</a></li>
                    <li><a href="#">Oak</a></li>
                    <li><a href="#">Wood</a></li>
                    <li><a href="#">Riley</a></li>
                    <li><a href="#">NEW</a></li>
                    <li><a href="#">South </a></li>
                    <li><a href="#">ITEM</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Grey</a></li>
                </ul>
        </ul>
    </li>

    <li>
        <a href="#" class="things_to_do_heading" rel="things_to_do_heading">THINGS TO DO</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="moving_to_here_heading" rel="moving_to_here_heading">MOVING TO HERE</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="population_heading" rel="population_heading">POPULATION</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="weather_heading" rel="weather_heading">WEATHER</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="education_heading" rel="education_heading">EDUCATION</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="health_heading" rel="health_heading">HEALTH</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="cemetery_heading" rel="cemetery_heading">CEMETERY</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>
</ul>

Answer 1

If I understand your question correctly... adding this to the #accordion li click event works for me:

if ($(this).children('a:first:not(".active")')) {
   $('a.history_heading').removeClass('active');
}

After page load, the anchor tag with a class of history_heading also has a class of active. After clicking on another menu heading (such as geography_heading), the active class will be removed from history_heading.

See the live and working example at http://jsfiddle.net/Laxman13/4bYkP/1/