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

Question

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.

Answer 1

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> 

Answer 2

Another possibility you might consider is, rather than hiding/unhiding buttons, you could use JavaScript to change the look and functioning of the button dynamically.

 function toggle(ev) { ev.target.dataset.state = ev.target.dataset.state === 'menu1' ? 'menu2' : 'menu1'; ev.target.textContent = ev.target.textContent === 'Test 1' ? 'Test 2' : 'Test 1'; if (ev.target.dataset.state === 'menu1') { // Add code to display Menu 1 here. } else if (ev.target.dataset.state === 'menu2') { // Add code to display Menu 2 here. } } document.querySelector('button').addEventListener('click', toggle); 

 <button type=button name=toggleButton data-state=menu1>Test 1</button> 

The way in which you hide or display the different menus could follow a similar approach as well. So you could have a toggleButton function, and inside that function, call a toggleMenu function.

Answer 3

i think if your using Jquery it's better create a hidden css class

.hidden {
  display: none;
}

and remove or add with method .addClass() or .removeClass()

Example:

html file:

<button id="hideMenu" class="sideviewtoggle myButton">Test 1</button>

js file

$('#hideMenu').on('click', function() {
  $('#menu-to-hide').addClass('hidden');
  //or
  $('#menu-to-show').removeClass('hidden');
});