Question

I’m not so good at JS and I need some help

I’m trying to make an accordion menu with Icon as a trigger. The Icon should be switching to (Open – / Close +). I made it by toggling class “active” to the trigger.

Here you can see in action http://jsfiddle.net/zbwub/4/

HTML:

<div class="acc_menu">

    <div class="acc_menu_item">
                <div class="acc_menu_title">                    
                    <h3><a href="#">CAT 1</a></h3>
                    <span class="ico"></span>
                </div>
                <div class="acc_menu_sub">
                    <ul>
                        <li><a href="#">Sub cat 1-1</a></li>
                        <li><a href="#">Sub cat 1-2</a></li>
                        <li><a href="#">Sub cat 1-3</a></li>
                    </ul>
                </div>
    </div>
    <div class="acc_menu_item">
                <div class="acc_menu_title">                   
                    <h3><a href="#">CAT 2</a></h3>
                    <span class="ico"></span>
                </div>
                <div class="acc_menu_sub">
                    <ul>
                        <li><a href="#">Sub cat 2-1</a></li>
                        <li><a href="#">Sub cat 2-2</a></li>
                        <li><a href="#">Sub cat 2-3</a></li>
                    </ul>
                </div>
    </div>

    <div class="acc_menu_item">
                <div class="acc_menu_title">                   
                    <h3><a href="#">CAT 3</a></h3>
                    <span class="ico"></span>
                </div>
                <div class="acc_menu_sub">
                    <ul>
                        <li><a href="#">Sub cat 3-1</a></li>
                        <li><a href="#">Sub cat 3-2</a></li>
                        <li><a href="#">Sub cat 3-3</a></li>
                    </ul>
                </div>
    </div>
</div>

JQuery:

$(".acc_menu_sub").hide();

$(".acc_menu_title .ico").toggle(function(){
        $(this).addClass("active");
}, function () {
        $(this).removeClass("active");
});

$(".acc_menu div div .ico").click(function(){
        if(false == $(this).parent().parent().children(".acc_menu_sub").is(':visible')) {
            $('.acc_menu .acc_menu_sub').slideUp(300,'easeInQuad');
        }        
        $(this).parent().parent().children(".acc_menu_sub").slideToggle(300,'easeInQuad');
});

But the problem is that I can’t figure it out how to make it to work right. When I click to not active menu the active is closing but the icon doesn’t change.

Thanks,
Serghey

SOLVED:

$(".acc_menu_sub").hide();     

    $(".acc_menu div div .ico").click(function(){        
        if(false == $(this).parent().parent().children(".acc_menu_sub").is(':visible')) {
            $(".acc_menu div div .ico").removeClass("active");
            $(this).addClass("active");
            $('.acc_menu .acc_menu_sub').slideUp(300,'easeInQuad').removeClass("active");                
        }        
        $(this).parent().parent().children(".acc_menu_sub").slideToggle(300,'easeInQuad');
});

Answer 1

Change the first function to this:

$(".acc_menu_sub").hide();

$(".acc_menu div div .ico").click(function(){
        $('.acc_menu .acc_menu_item .acc_menu_title .ico.active').removeClass('active');
        if(false == $(this).parent().parent().children(".acc_menu_sub").is(':visible')) {
            $('.acc_menu .acc_menu_sub').slideUp(300,'easeInQuad');
            $(this).addClass('active');
        }
        $(this).parent().parent().children(".acc_menu_sub").slideToggle(300,'easeInQuad');
});

It basically remove all the active classes out there before adding the one you want to be active.

Tried in this jsFiddle.

PS: Updated.