How to show an hidden element by clicking on another element

Question

Here's a fiddle :
http://fiddle.jshell.net/ggw6hqsj/1/

Here's my problem (for example) :
When the first button is clicked, the second is hidden. But I don't know how to make reappear the hidden button when the first button is clicked once again.

Any idea ? Thanks.

Answer 1

$(document).ready(function(){ $('.button1').click(function(){ $('.button2').toggle(); }); });

http://fiddle.jshell.net/ggw6hqsj/3/

Answer 2

The easiest way in your code would be to change

$('.button2').hide();

to

$('.button2').toggle();

for button 1 and 2.

fiddle

Answer 3

现有代码最简单的更改可能就是使用.toggle()而不是.toggle() .hide() ：

$('.button2').toggle();

Answer 4

You only need to show the clicked button and hide the other one.

try this

function activateButton(num){
    var activeButton = ".button" + num;
    var otherButton = ".button" + (num === "1" ? "2" : "1");
    $(this).toggleClass('active');
    $(activeButton).show();
    $(otherButton).hide();      
}

$(document).ready(function(){
    $('.button1').click(activateButton("1"));
    $('.button2').click(activateButton("2"));
});