Different buttons for open and close nav menu-CodePudding

I want to have a different button to open the menu options and a different button placed somewhere else to close the menu options. With the JS code below I can use only one button to toggle and open the menu with options.

(function($) {

    $(document).ready(function() {

        $('.hamburger__container').click(function() {
            $('.nav').toggleClass('open');
            $('.controls').toggleClass('open2');
            $(this).children().first().toggleClass('open');
            $('html, body').toggleClass('noscroll');
        });

        // Bacon Ipsum
        $.ajax({
            url: 'https://baconipsum.com/api/?type=all-meat&paras=2&start-with-lorem=1&format=html',
            success: function(data) {
                $('#content').html(data);
            }
        });

    });
})(jQuery);

and HTML code:

        <button >
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><path d="M893.8,294.1H655.5c49-32.1,95.4-73.9,100.8-119.5c2.7-22.2-2.5-54.8-42.7-83.9c-22.3-16.1-44.9-24.3-67.2-24.3c-70.9,0-111,79.5-132.7,150.6c-25.8-90.6-75.9-207-161.8-207c-25.1,0-50,9.9-74.3,29.5c-47.8,38.7-52.6,78.9-48.1,105.8c10,60.2,76.3,112,140.1,148.7H106.2c-19.3,0-34.9,15.3-34.9,34.1v186.3c0,18.8,15.6,34.1,34.9,34.1h9.1v407.4c0,18.8,15.6,34.1,34.9,34.1h699.6c19.3,0,35-15.3,35-34.1V548.5h9.1c19.4,0,35-15.3,35-34.1V328.1C928.8,309.3,913.1,294.1,893.8,294.1L893.8,294.1z M858.8,477.2H566.6v-115h292.2V477.2L858.8,477.2z M646.4,134.6c6.9,0,15.7,3.7,25.6,10.9c16,11.6,15.1,18.7,14.9,21.1c-3,24.8-54,63.9-113.4,96.2C591,194.1,619.5,134.6,646.4,134.6L646.4,134.6z M298.5,134.4c-1-5.6-3.4-20.5,23.7-42.4c7.8-6.3,19.3-13.8,29.6-13.8c38.5,0,78,92.3,101.1,182.1C380.3,224.9,305.2,174.6,298.5,134.4L298.5,134.4z M437.1,362.2v115h-296v-115H437.1L437.1,362.2z M185.2,518.1h251.9v403.7H185.2V518.1L185.2,518.1z M566.7,921.8V518.1h248.1v403.7H566.7L566.7,921.8z"/></g>
</svg>

           <div  style="transform: translate(150px);">
                <i></i>
                <i></i>
                <i></i>
            </div>
          
        </button>

There is also the CSS code and other part of HTML code but I though this part would be enough to show my point. In the HTML code there is only one button that opens and closes the navigation.

CodePudding user response：

You can always "simulate" a click in a button from another button

just:

$('.otherButton').click(function () {
$('.hamburger__container').trigger("click"); // behaves like if the user had pressed the original button
});

or you could encapsulate your event in a function and use it in both buttons

let myEventHandler = function() {
    $('.nav').toggleClass('open');
    $('.controls').toggleClass('open2');
    $(this).children().first().toggleClass('open');
    $('html, body').toggleClass('noscroll');
}

$('.hamburger__container').click(myEventHandler );
// somwhere else in your code
$('.otherButton').click(myEventHandler );

or if both buttons exist in your code at the same time you can just target them both when initializing the event

$('.hamburger__container, .otherButton').click(function() {
    $('.nav').toggleClass('open');
    $('.controls').toggleClass('open2');
    $(this).children().first().toggleClass('open');
    $('html, body').toggleClass('noscroll');
});