Q:

how to hide and show one button after clicked on another button?

I'm gonna use two buttons in one page. Something like when we click on first one then second button will be appeared instead on first one and if we click on second one then first one will be appeared. without losing function of the button.
here is my button code:
<button id="button1" onclick="menu2.toggle()" class="sideviewtoggle myButton">Test 1</button>
<button id="button2" onclick="menu3.toggle()" class="sideviewtoggle myButton">Test 2</button>

For example:
Test 1 is default, and test 2 is hidden, if we click on test 1 then test 1 will disappear and instead test 2 will be appeared and again if we click on test 2 then it will be disappeared and instead test 1 will be appeared. without losing onclick function of these two buttons.
Here is my toggle menu function, if we click on test 1 button then this page: togglemenu.php will open and if we click on test 2, then togglemenu2.php will open as well.  
jQuery(function(){
menu2 = new sidetogglemenu({  
id: 'togglemenu2', 
position: 'right',
source: 'togglemenu.php', 
revealamt: -5
})

jQuery(function(){
menu3 = new sidetogglemenu({  
id: 'togglemenu3', 
position: 'right',
source: 'togglemenu2.php', 
revealamt: -5
})

How to make it?
Thanks in advance.

A:

By without losing the function of the button, I assume you mean that you want to keep the menu toggle.  What you need to do is define your own function, and inside that function, toggle your menu AND perform the show/hide that you desire. 
Under the assumption that you are new to javascript, I wrote this example to be straightforward.

//With a function, I am able to perform multiple tasks 
function SwitchButtons(buttonId) {
  var hideBtn, showBtn, menuToggle;
  if (buttonId == 'button1') {
    menuToggle = 'menu2';
    showBtn = 'button2';
    hideBtn = 'button1';
  } else {
    menuToggle = 'menu3';
    showBtn = 'button1';
    hideBtn = 'button2';
  }
  //I don't have your menus, so this is commented out.  just uncomment for your usage
  // document.getElementById(menuToggle).toggle(); //step 1: toggle menu
  document.getElementById(hideBtn).style.display = 'none'; //step 2 :additional feature hide button
  document.getElementById(showBtn).style.display = ''; //step 3:additional feature show button


}
<button id="button1" onclick="SwitchButtons('button1');" class="sideviewtoggle myButton">Test 1</button>
<button id="button2" onclick="SwitchButtons('button2');" class="sideviewtoggle myButton" style='display:none;'>Test 2</button>

