jQuery Navigation Menu Toggling

Question

I am working on creating a Mega Menu with jQuery in Drupal but I am having a bit of trouble and I believe it is due to my lack of working with jQuery and perhaps one of you all can help me out.

I want it so that when the user clicks on a portion of the nav menu it will display all of that menu's content and not show any other menu content, but if the user clicks it again it will collapse the menu below and show nothing. I feel that I am pretty close because I currently have it so that if I click the menu it will show its content and non of the others, but my issue is that if I click on one of the links and then another one, if I went back to the new menu I would have to click that menu twice to get the other links to display.

I believe this is due to the toggle function, but I am a little stumped as to where I am supposed to go from here. Does anybody have any ideas for me? Here is my jQuery:

function hideAll()
{
    $(".mega-menu-wrap").hide();
            $('.col1').hide();
    $(".col2").hide();
    $('.col3').hide();
    $('.col4').hide();
    $('.col5').hide();
}
function showCol1()
{
    $(".mega-menu-wrap").show();
    $('.col1').show();
    $(".col2").hide();
    $('.col3').hide();
    $('.col4').hide();
    $('.col5').hide();
}
function showCol2()
{
    $(".mega-menu-wrap").show();
    $('.col1').hide();
    $(".col2").show();
    $('.col3').hide();
    $('.col4').hide();
    $('.col5').hide();
}
function showCol3()
{
    $(".mega-menu-wrap").show();
    $('.col1').hide();
    $(".col2").hide();
    $('.col3').show();
    $('.col4').hide();
    $('.col5').hide();
}
function showCol4()
{
    $(".mega-menu-wrap").show();
    $('.col1').hide();
    $(".col2").hide();
    $('.col3').hide();
    $('.col4').show();
    $('.col5').hide();
}
function showCol5()
{
    $(".mega-menu-wrap").show();
    $('.col1').hide();
    $(".col2").hide();
    $('.col3').hide();
    $('.col4').hide();
    $('.col5').show();
}

$(".col-menu1").slideToggle(
    showCol1,
    hideAll
);

$(".col-menu2").toggle(
    showCol2,
    hideAll
);

$(".col-menu3").toggle(
    showCol3,
    hideAll
);

$(".col-menu4").toggle(
    showCol4,
    hideAll
);

$(".col-menu5").toggle(
    showCol5,
    hideAll
);

I also have everything hiding on document.ready. I just didn't think it was important to show. Any help would be much appreciated. Thanks!

---EDIT---

Here is the jsfiddle to better show how everything is a little messed up. If you just play around with the header you will see what I am talking about.

http://jsfiddle.net/n5G8j/

Answer 1

I have this solution to your problem. I'll try to comment as to give you an idea of how I achieved this.

<script>
$(function() {

    // Start off with everything hidden

    $(".col").hide();
    $(".mega-menu-wrap").hide();

    // Function that is excecuted on click of .col-menu

    $(document).on("click", ".col-menu", function() {

        // Hide everything again.

        $(".col").hide();
        $(".mega-menu-wrap").hide();

        // Find the value of which content item to display

        var id = $(this).attr('menu-id');

        // If a menu link is clicked on it will be given a class of active (see last line of else {} )
        // That is to determine whether or not a piece of menu content is visible or not

        if ($(this).hasClass("active")) {

            // If the link is active, just hide the content and remove the class
            $(".mega-menu-wrap").hide();
            $(".col" + id).hide();
            $(this).removeClass("active")

        } else {

            // Else remove all active classes and show the new content
            $(".active").removeClass("active");
            $(".mega-menu-wrap").show();
            $(".col" + id).show();
            $(this).addClass("active");

        }
    });
});
</script>

Find the working jsFiddle here (I cleaned up some php tags and missing images):

http://jsfiddle.net/the_dow/E453a/5/

Feel free to let me know if anything is unclear.