Tricky Collapsible

by Joe Saad

HTML

<nav id="left_nav">
    <ul>
        <li>
            <div>Menu 1<span class="acd-arrow"></span></div>
            <ul>
                <li><a href="#">AC/Heat Protect</a></li>
                <li><a href="#">A/C Tune-Up</a></li>
                <li class="selected">Heater Tune-Up</li>
                <li><a href="#">Air Filter Delivery</a></li>
                <li><a href="#">Surge Protect</a></li>
                <li><a href="#">Electric Line Protect</a></li>
                <li><a href="#">Electric Line w/Surge Protect</a></li>
                <li><a href="#">Identity Protect</a></li>
            </ul>
        </li>
        <li class="collapsed">
            <div>REFERAL SERVICE<span class="acd-arrow"></span></div>
            <ul>
                <li><a href="#">Referal Service 1</a></li>
                <li><a href="#">Referal Service 2</a></li>
                <li><a href="#">Referal Service 3</a></li>
                <li><a href="#">Referal Service 4</a></li>
            </ul>
        </li>
        <li class="collapsed">
            <div>Specials<span class="acd-arrow"></span></div>
            <ul>
                <li><a href="#">Referal Service 1</a></li>
                <li><a href="#">Referal Service 2</a></li>
                <li><a href="#">Referal Service 3</a></li>
                <li><a href="#">Referal Service 4</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

li.collapsed > ul {
    display:none
}
li.expanded > ul {
    display:block
}

JavaScript

var counter = 0;
var myIndex;
var trackedExpands = []; 
var initialIndex = $('#left_nav > ul > li.expanded').index()+1;
alert(initialIndex);
trackedExpands.push(initialIndex);
$('#left_nav > ul > li div').click(function () {
    
    var $this = $(this).closest('li');
    //$('#left_nav').find('li').not($this).children('ul').slideUp();
    if ($this.children('ul').is(':hidden')) {
        $this.children('ul').slideDown();
        $this.attr('class', 'expanded');
        myIndex = $this.index();
        counter ++;
        trackedExpands.push(myIndex);
        var num_Expanded = $('li.expanded').length;
        if (num_Expanded > 2 ) {
            alert($('#left_nav > ul > li').eq(trackedExpands[0]).text());
            $('#left_nav > ul > li').eq(trackedExpands[0]).prop("class","collapsed");
            $('#left_nav > ul > li').eq(trackedExpands[0]).children("ul").slideUp();
            alert($('#left_nav > ul > li').eq(trackedExpands[0]).prop("class"));
           
            
            
           num_Expanded = $('li.expanded').length;
            var removeItem = trackedExpands[0];
    
            trackedExpands = jQuery.grep(trackedExpands, function(value) {
            return value != removeItem;
            });
            
        }
       
        alert('num_Expanded: '+num_Expanded + 'counter' + counter);
        
        $.each(trackedExpands, function(index, value) { 
           console.log(index + ': ' + value); 
        });
        
    } else {
        
        myIndex = $this.index();
        var removeItem = myIndex ;
    
            trackedExpands = jQuery.grep(trackedExpands, function(value) {
            return value != removeItem;
            });
        $this.children('ul').slideUp();
        $this.attr('class', 'collapsed');
    }
});

$('#left_nav li').each(function () {
    if ($(this).hasClass('selected')) {
        $(this).parents('li').children('ul').show();
        $(this).parents('li').attr('class', 'expanded');
    }
});