title: Replace Bootstrap modal's body by clicking
body: <p>I want to replace Bootstrap modal's body by clicking on link. Here is my code:</p>
  
  <p><strong>index.php:</strong></p>
  
  <pre><code>&lt;div id="regModal" class = "modal fade" role = "dialog"&gt;
      &lt;div class ="modal-content"&gt;
          &lt;div class ="modal-header"&gt;...&lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;div class = "row"&gt;
                  &lt;div class="col-xs-12 login-modal"&gt;...&lt;/div&gt;
                  &lt;div  class="col-xs-12 register-modal hidden"&gt;...&lt;div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class ="modal-footer"&gt;&lt;a&gt;click&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>style.css:</strong></p>
  
  <pre><code>#regModal .hidden{
      display: none;
  }
  </code></pre>
  
  <p><strong>modal.js:</strong></p>
  
  <pre><code>$("#regModal a").click(function(evt) {
      $("#regModal .login-modal").fadeOut();
      $("#regModal .hidden").fadeIn();        
  });
  </code></pre>
  
  <p>It's actually hide whole of modal. how to replace <em>login-modal</em> with <em>register-modal</em>?</p>