jQuery - Activating one toggle button disables the other

Question

I'm having issues with two jQuery toggle buttons. They are used for mobile navigation buttons:

(function($) {
    $(function() {
$('#mobile-nav-button').toggle(
    function() {
        $('#fullpage').animate({ left: 250 }, 'normal', function() {
            $('#mobile-nav-button').html('Close');{
            $('#social-nav-panel').hide();
        }
        });
    },
    function() {
        $('#fullpage').animate({ left: 0 }, 'normal', function() {
            $('#mobile-nav-button').html('Open');
        });
    }
);
$('#social-nav-button').toggle(
    function() {
        $('#fullpage').animate({ right: 250 }, 'normal', function() {
            $('#social-nav-button').html('Close');
        });
    },
    function() {
        $('#fullpage').animate({ right: 0 }, 'normal', function() {
            $('#social-nav-button').html('Open');
        });
    }
);
    });
})(jQuery);

On their own they work fine. The first button #mobile-nav-button works perfectly each time. The second button #social-nav-button also works fine. However, if #mobile-nav-button is selected, then #social-nav-button will cease to work (this does not apply the other way round, as #mobule-nav-button will always work, even if #social-nav-button has been selected).

I've seen a lot of similar posts on stack overflow (though not the same problem), but my JS/jQuery knowledge is sadly nowhere near good enough to apply any fixes to my issue.

Any help would be massively appreciated!

Answer 1

You can check my example: Toggle Buttons show and hide

HTML:

<button type="button" id="mobile_bt">Mobile</button>
<button type="button" id="social_bt">Social</button>

JS using jQuery:

$('#mobile_bt').click(function() {
    var help= $(this);
  $('#social_bt').toggle('slow', function() {
    help.hide();
    $(this).show();
  });
});

$('#social_bt').click(function() {
    var help= $(this);
  $('#mobile_bt').toggle('slow', function() {
    help.hide();
    $(this).show();
  });
});