How to alternate jquery toggle slide actions on click

Tags: ,

I want to show two elements on click, one after the other, whereby a user clicks a button the first element with a class(.show-element-one), is shown and when the user clicks the same button for the second time the second element is shown with class(.show-element-two) , am using the code below to show element one on click but I am stuck with showing the second element on the second click.

jQuery(document).ready(function() {
  jQuery('#display-elements').click(function() {

I will appreciate any guides, thanks.


You can set up a counter variable calculate the modulus value for that to display the element of that two classes in circular manner. Something like the code below:

jQuery(document).ready(function() {
  var count = 1;
  jQuery('#display-elements').click(function() {
    jQuery('.show-element-one, .show-element-two').hide();
    if (count % 2 !== 0) {
    } else {
.show-element-two {
  display: none;
<script src=""></script>
<button id="display-elements"> Click me </button>
<div class="show-element-one">
<div class="show-element-two">show-element-two </div>

Source: stackoverflow