jQuery: Writing Mega Menu with ToggleClass

Question

I'm working on building a Mega Menu for our site's header. I'm using jQuery to toggleClass to set active states for the "drawers". I am fairly new to jQuery and haven't gotten into a lot of the more complex ways to structure code, so my current implementation, I think, is very tedious/verbose and I'm wondering if there is a better way to do this class toggling. Note that (at least at this point) I've chosen not to go the hover route but instead use click toggling. Hover menus can be a PITA.

Here is my CodePen with everything in it, include the jQuery in question: http://codepen.io/ksherman/pen/YPMXJW

Here is the jQuery block:

$('#admissions').click(function(){
    $(this).parent().toggleClass('active');
    $('.admissionsNav').toggleClass('active');
    $('.degreesNav, .applyNav, .visitNav, .campusNav, .aboutNav, .searchNav').removeClass('active');
    $('#degrees, #apply, #visit, #campus, #about, #search').parent().removeClass('active');
});

$('#degrees').click(function(){
    $(this).parent().toggleClass('active');
    $('.degreesNav').toggleClass('active');
    $('.applyNav, .visitNav, .campusNav, .aboutNav, .searchNav, .admissionsNav').removeClass('active');
    $('#admissions, #apply, #visit, #campus, #about, #search').parent().removeClass('active');
});

$('#apply').click(function(){
    $(this).parent().toggleClass('active');
    $('.applyNav').toggleClass('active');
    $('.visitNav, .campusNav, .aboutNav, .searchNav, .admissionsNav, .degreesNav').removeClass('active');
    $('#visit, #campus, #about, #search, #admissions, #degrees').parent().removeClass('active');
});

$('#visit').click(function(){
    $(this).parent().toggleClass('active');
    $('.visitNav').toggleClass('active');
    $('.campusNav, .aboutNav, .searchNav, .admissionsNav, .degreesNav, .applyNav').removeClass('active');
    $('#admissions, #degrees, #apply, #campus, #about, #search').parent().removeClass('active');
});

$('#campus').click(function(){
    $(this).parent().toggleClass('active');
    $('.campusNav').toggleClass('active');
    $('.aboutNav, .searchNav, .admissionsNav, .degreesNav, .applyNav, .visitNav').removeClass('active');
    $('#admissions, #degrees, #apply, #visit, #about, #search').parent().removeClass('active');
});

$('#about').click(function(){
    $(this).parent().toggleClass('active');
    $('.aboutNav').toggleClass('active');
    $('.searchNav, .admissionsNav, .degreesNav, .applyNav, .visitNav, .campusNav').removeClass('active');
    $('#admissions, #degrees, #apply, #visit, #campus,  #search').parent().removeClass('active');
});

$('#search').click(function(){
    $(this).parent().toggleClass('active');
    $('.searchNav').toggleClass('active');
    $('.admissionsNav, .degreesNav, .applyNav, .visitNav, .campusNav, .aboutNav').removeClass('active');
    $('#admissions, #degrees, #apply, #visit, #campus, #about').parent().removeClass('active');
});

$('#body').click( function () {
    $('.admissionsNav, .degreesNav, .applyNav, .visitNav, .campusNav, .aboutNav, .searchNav').removeClass('active');
    $('#admissions, #degrees, #apply, #visit, #campus, #about, #search').parent().removeClass('active');
});

Answer 1

Combine the common elements into a single method:

Javascript:

$('#awesome_ul li a').click(function(){
    $(this).parent().toggleClass('active');
    //hide all
    $('.admissionsNav, .degreesNav, .applyNav, .visitNav, .campusNav, .aboutNav, .searchNav').removeClass('active');
    $('#admissions, #degrees, #apply, #visit, #campus, #about, #search').parent().removeClass('active');

    //show wanted one
    $('.'+$(this).attr('id')+'Nav').toggleClass('active');
});

HTML :

<div class="primary">
        <div class="row collapse">
            <div class="small-12 columns">
                <ul id="awesome_ul">

Answer 2

You could combine those into one function, and call it for all the buttons.

var menus = ['admissions', 'degrees', 'apply', 'visit', 'campus', 'about', 'search'];

function menuClick(e) {
    $(this).parent().toggleClass('active');
    $('.' + e.target.id + 'Nav').toggleClass('active');
    var otherMenus = menus.filter(function (item) { return item !== e.target.id });
    otherMenus.forEach(function (menu) {
        $('.' + menu + 'Nav').removeClass('active');
        $('#' + menu).parent().removeClass('active');
    });
}
menus.forEach(function (menu) {
    $('#' + menu).click(menuClick);
});
$('#body').click( menuClick );

See this codepen