How to toggle between two div elements using a button

Question

I know how to toggle div, that is to hide/show elements. But how to toggle between two div's ?

<button>Change</button>
<div class="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Answer 1

you can make use of toggle() function in jquery. hide any one div and show other initially and then call toggle() on button click

$(function(){
  $('div.hindi').hide();// hide it initially
  $('button').on('click', function(){
     $('div.english, div.hindi').toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change</button>
<div class="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>