jquery navigation problems, having to double click

Question

I have a navigation which you can see here : http://hutchcreative.co.uk/rod/

If you click on the menu icon (top right corner) it brings up the dark nav menu. If you click on contact us it then brings up the white contact us section. Then click on the menu icon to close everything. If you then click on the menu icon again it opens the dark nav as before, but if you click on contact it doesn't open. You have to click on it a second time to open the white contact section. Does anyone have any idea how to fix this?

Here is my jquery:

jQuery(function($) {    
$('#menuIcon').toggle(function(){
       $('#navigationWrapper ul').hide();
       $('#navigationWrapper ul').show();
       $("#navigationWrapper").css("background-color", "rgba(0,0,0,0.3)");
},function(){
       $('#navigationWrapper ul').show();
       $('#navigationWrapper ul').hide();
       $("#navigationWrapper").css("background-color", "rgba(0,0,0,0.0)");
});

$('#menu-item-56').toggle(function(){
       $('#contactWrapper').hide();
       $('#contactWrapper').show();
       $("#navigationWrapper").addClass('whiteSection');
       $("#navigationWrapper").css("background-color", "rgba(255,255,255,1)");
},function(){
       $('#contactWrapper').show();
       $('#contactWrapper').hide();
       $("#navigationWrapper").removeClass('whiteSection');
       $("#navigationWrapper").css("background-color", "rgba(0,0,0,0.3)");
});

$("#menuIcon").click(function ( event ) {
    event.preventDefault();
    $('#contactWrapper').hide();
    $("#navigationWrapper").removeClass('whiteSection');
    if($('#contactWrapper').is(":visible")) {  $('#contactWrapper').hide(); }
});

});

Here is my html

<nav id="navigationWrapper">
    <div class="container">
        <div class="row">
            <div class="span6">
                <div id="logo"></div>
            </div>
            <div class="span6">
                <div id="menuIcon"></div>
                <ul>

                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false, 'menu_class' => 'menu', 'menu_id' => 'menu', 'depth' => 1, 'fallback_cb' => '', 'items_wrap' => '%3$s' ) ); ?>

                    <?php get_template_part( 'part', 'social' ); ?>

                </ul>
            </div>
        </div>
    </div>
</nav>

<div id="contactWrapper" >
    <div class="container">
        <div class="row">
            <?php
                    // query for the about page
                    $your_query = new WP_Query( 'pagename=contact' );
                    // "loop" through query (even though it's just one page) 
                    while ( $your_query->have_posts() ) : $your_query->the_post(); ?>
                        <div class="span6">
                            <?php the_title(); ?>
                            <?php the_content(); ?>
                        </div>
                        <div class="span6">
                            <?php the_field('email_address'); ?>
                        </div>
                <?php endwhile;
                // reset post data (important!)
                wp_reset_postdata();
                ?>
        </div>
    </div>
</div>

Answer 1

That's because you are using .toggle() event (which by the way is deprecated). Clicking on the menu isn't the toggling function which usually hides the contact menu.

Try this instead :

$('#menu-item-56').click(function(){
    if($("#navigationWrapper").hasClass('whiteSection')){
        $('#contactWrapper').show();
        $('#contactWrapper').hide();
        $("#navigationWrapper").removeClass('whiteSection');
        $("#navigationWrapper").css("background-color", "rgba(0,0,0,0.3)");
    }else{
        $('#contactWrapper').hide();
        $('#contactWrapper').show();
        $("#navigationWrapper").addClass('whiteSection');
        $("#navigationWrapper").css("background-color", "rgba(255,255,255,1)");
    }
});

It is closing or opening menu depending if it has class, but there's no way I can test it.

Of course that code could be optimized, but that's not the actual question!