collapsible

by Joe Saad

HTML

<nav>
    <ul>
        <li>
            <div>PROJECTION PRODUCTS<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>
            <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>SPECIALS
            <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>
</nav>
</ul>

CSS

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

JavaScript

$(function () {
    $("nav > ul > li").addClass("collapsed");
    $('nav > ul > li').click(function () {
        if ($(this).hasClass('collapsed')) {
            $(this).removeClass("collapsed").addClass("expanded");
        } else {
            $(this).removeClass("expanded").addClass("collapsed");
        }
    });
});