Question

Hi I’m trying to simplify this code but can’t think which way to do it, any ideas? Its effectively a mega mega

$(function() {
    $('#globalnavigation').find("a").bind({
        click: function() {
            if (".submenu:hidden") {
                $(".submenu").css("display", "block");
            }
            if ($('a[href$="#a-menu"]')) {
                $(this).addClass("active");
                $("#services-menu").css("display", "none");
                $("#innovations-menu").css("display", "none");
                $("#insights-menu").css("display", "none");
                $("#professionals-menu").fadeIn(750);
            }
            if ($('a[href$="#b-menu"]')) {
                $(this).addClass("active");
                $("#professionals-menu").css("display", "none");
                $("#innovations-menu").css("display", "none");
                $("#insights-menu").css("display", "none");
                $("#services-menu").fadeIn(750);
            }
            if ($('a[href$="#c-menu"]')) {
                $(this).addClass("active");
                $("#services-menu").css("display", "none");
                $("#innovations-menu").css("display", "none");
                $("#professionals-menu").css("display", "none");
                $("#insights-menu").fadeIn(750);
            }
            if ($('a[href$="#d-menu"]')) {
                $(this).addClass("active");
                $("#services-menu").css("display", "none");
                $("#professionals-menu").css("display", "none");
                $("#insights-menu").css("display", "none");
                $("#innovations-menu").fadeIn(750);
            }
        }
    });
});

Answer 1

CSS:

.submenu-content
{
  display: none;
}

HTML:

<nav id="globalnavigation">         
    <ul>
        <li><a id="menu-item-a" href="#professionals-menu">Professionals</a></li>
        <li><a id="menu-item-b" href="#services-menu">Services</a></li>
        <li><a id="menu-item-c" href="#insights-menu">Insights</a></li>
        <li><a id="menu-item-d" href="#innovation-menu">Innovation</a></li>
    </ul>
</nav>

<section class="submenu" style="display: block;">
    ...
    <div class="submenu-content" id="submenu-content-a">
    <div class="submenu-content" id="submenu-content-b">
    <div class="submenu-content" id="submenu-content-c">
    <div class="submenu-content" id="submenu-content-d">
    ...
</section>

JavaScript:

    $('#globalnavigation').find("a").click(function () {
        $(this).addClass("active");        
        $('.submenu').show();
        $('.submenu-content').hide();

        var id = $(this).attr('id').replace('menu-item-', '');
        $('#submenu-content-' + id).fadeIn(750);
    });