使用jQuery中的一个按钮隐藏/显示div

Question

I am trying to hide one element and show the other when when button is clicked and switch around when it is clicked again.

I came up with something like this but this isn't going to work...

 jQuery("#wcvat-toggle").click(function() { jQuery("#excltaxout").show(); jQuery("#incltaxout").hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id="wcvat-toggle"> <span id="incltaxout">Including Tax</span> <span id="excltaxout">Excluding Tax</span> </a> 

However this will always show the #excltaxout . Any suggestions?

Answer 1

To make this work - and assuming that one of those elements starts hidden - you can simply call toggle() on them both at the same time. This will invert their display states.

 jQuery(function($) { $("#wcvat-toggle").click(function() { $("#excltaxout, #incltaxout").toggle(); }); }); 

 #excltaxout { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id="wcvat-toggle"> <span id="incltaxout">Including Tax</span> <span id="excltaxout">Excluding Tax</span> </a> 

Answer 2

You can use jQuery's .toggle() :

Display or hide the matched elements.

 $("#wcvat-toggle").click(() => { $("#incltaxout").toggle(); $("#excltaxout").toggle(); }); 

 #incltaxout {display:none} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="wcvat-toggle"> <span id="incltaxout">Including Tax</span> <span id="excltaxout">Excluding Tax</span> </a> 

Note however that this only works if one element is hidden by default, if not you will hide/show both at once.