Question

The following toggleClass does not work:

    $nav_item = $ ('.active_wrapper, .main_nav div.arrow_up_img, .main_nav div.arrow_down_img'),
    $arrow_down = $ ('.main_nav div.arrow_down_img'),
    $arrow_up = $ ('main_nav div.arrow_up_img');

    $('.active_wrapper').click(function(e){
        e.preventDefault();
        $('.main_nav div').not($nav_item).slideToggle('slow', function(){
            $(arrow_down).toggleClass($arrow_up);
        });

    });

HTML

        <nav class="main_nav">
            <div class="active_wrapper"><a href="#">Home</a>
                <div class="arrow_down_img"></div>
            </div>
            <div><a href="about.php">About Us</a></div> 
            <div><a href="flavours.php">Flavours</a></div>
            <div><a href="stockists.php">Stockists</a></div>
            <div><a href="thecollective.php">The collective</a></div>
            <div><a href="shop.php">Shop</a></div>
        </nav>

The toggleClass is used to swap between 2 arrows one pointing up and one down (you can imagine this is a drop down menu) but I really can’t figure out why it is not working..

Answer 1

The correct code would be
$arrow_down.toggleClass('arrow_up_img');