Menu met jQuery

Ik heb een kaart gemaakt met html/css wat bestaat uit 4 menu's. Natuurlijk zou ik elk menu op een andere pagina kunnen doen. En elke menu knop naar één van de pagina's kunnen leiden. Maar graag wil ik met jQuery, dat wanneer je op 1 van de 4 knoppen drukt dat dat specifieke menu verschijnt. Zodra 1 menu geopend is, word het hoofdmenu op `diplay: none` gezet en het menu dat gekozen is op `display: block`. Dit kan ik heel makkelijk doen door een .click functie en de .show() en .hide() functies van jQuery. Elke keer als een één van de specifieke menu's actief is dat er een 'go back' knop is, die terug leidt naar het hoofd menu. Om niet te veel overbodige code te hebben wil ik dat elk van de 4 menu's gewoon dezelfde 'go back' knop gebruikt. Die wanneer je er op klikt, dat het specifieke menu sluit en het hoofdmenu weer zichtbaar is. Hoe kan ik dit het beste met jQuery doen?

Hieronder is de code die ik dit moment gebruik. Ook heb ik nog maar 1 van de menu's in de code staan, puur om het een en ander te testen.

<div class="container-fluid" id="menu">
            <div class="row">
                <div class="col-md-2 col-sm-2 col-2 offset-md-5 offset-sm-5 offset-5">
                    <div id="weed-tab">
                        <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                        <p class="menu-name">Wiet</p>
                    </div>
                </div>
            </div>
            <div class="row justify-content-md-center">
                <div class="col-md-2 col-sm-2 col-2">
                    <div id="indica-tab">
                        <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                        <p class="menu-name">Indica</p>
                    </div>
                </div>
                <div class="col-md-2 col-sm-2 col-2">
                    <div id="sativa-tab">
                        <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                        <p class="menu-name">Sativa</p>
                    </div>
                </div>
                <div class="col-md-2 col-sm-2 col-2">
                    <div id="hybrid-tab">
                        <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                        <p class="menu-name">Hybrid</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid" id="weed-menu">
            <div class="row">
                <div class="col-md-2 offset-md-5">
                    <div class="back-btn">
                        <img class="menu-btn" src="{{assets}}/img/menu-button-weed.png">
                    </div>
                </div>
            </div>
        </div>

    </div>`
    <script>
        $('#weed-tab').click(function(){
            $('#menu').hide();
            $('#weed-menu').show();
            $('.back-btn').show();
        });

        $('.back-btn').click(function(){
            $('#menu').show();
            $('#weed-menu').hide();
        });
    </script>