Optimizing jQuery functions for mobile menu I'm using Bootstrap 3 as the front-end framework for this. It is quite simple but I feel I'm doing it wrong. I'm sure this code can be optimized not to duplicate the $('a[href=""]') functions but I just can't wrap my head around it.

For now, this code is only for mobile. I'll have to figure out how to control the menu behavior for larger screens (not requested at this time).

jsFiddle (you need to resize your browser to see the effect)

$(document).ready(function () { 

/*
 * Modification du boutton MENU pour CLOSE
 */ 

$('button').on('click', function(e){
    var str = $(this).text();
    if(str =="CLOSE"){
        $(this).html("MENU");
    }
    else{
        $(this).html("CLOSE");
    }

    if(str == "MAIN MENU"){
        e.stopPropagation();
        $('#menuContacts').css('display', 'none');
            $('#menuWines').css('display', 'none');
            $('#menuMain').css('display', 'block');

            $('button').html('CLOSE');
    }
});

/*
 * Modification du menuMain pour le menuContacts
 */

$('a[href="#contacts"]').on('click', function(e){
    e.preventDefault();
    $('#menuMain').css('display', 'none');
    $('#menuContacts').css('display', 'block');

    $('button').html('MAIN MENU');

});

/*
 * Modification du menuMain pour le menuWine
 */

$('a[href="#wines"]').on('click', function(e){
    e.preventDefault();
    $('#menuMain').css('display', 'none');
    $('#menuWines').css('display', 'block');

    $('button').html('MAIN MENU');

});
});
you can add some data attribute to the HTML like this    

&lt;ul id="menuMain" class="nav navbar-nav"&gt;
    &lt;li&gt;&lt;a href="#preface"&gt;Préface&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#maison"&gt;Maison Ilan&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#history"&gt;History&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#vineyard"&gt;Vineyard&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#cuverie"&gt;Cuverie&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#chai"&gt;Chai&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#wines" data-menu="#menuWines"&gt;Wines&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#contacts" data-menu="#menuContacts"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;    


so instead of .on('click') for each link you can do something like this     

//all the links in #menuMain
$('#menuMain a').on('click', function(e){
    e.preventDefault();
    $('#menuMain').css('display', 'none');
//$(this).data("menu") have the id of the element to display
    $($(this).data("menu")).css('display', 'block');
    $('button').html('MAIN MENU');
});     


http://jsfiddle.net/zXe7C/4/
for the example i only add the data attribute to the last two links but if you dont have something on the attribute or some element with that id then it will only hide "menuMain" but you can check first if the element $($(this).data("menu")) exists