javascript - how to hide and show one button after clicked on another button? - Stack Overflow

admin管理员组

文章数量:1402945

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.

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.

• javascript
• jquery
• button
• buttonclick

Share Improve this question Follow edited Nov 28, 2015 at 4:50 Alexander Richard asked Nov 28, 2015 at 1:06 Alexander RichardAlexander Richard 19144 gold badges88 silver badges1818 bronze badges 2

• document.getElementById('yourButtonId').style.display='none'; to hide document.getElementById('yourButtonId').style.display=''; to show – Eric Phillips Commented Nov 28, 2015 at 1:09
• This is just for show and hide button, I need a function to hide and show after click. and is it possible to get element by class? – Alexander Richard Commented Nov 28, 2015 at 1:25

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 mented out.  just unment 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>

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.

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');
});

本文标签： javascripthow to hide and show one button after clicked on another buttonStack Overflow