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.