title: Bootstrap modal reset to initial content
body: <p>I am using bootstrap modal.</p>
  
  <p>I want to make it like a wizard.</p>
  
  <pre><code>&lt;div class="modal fade"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;x&lt;/button&gt;
      &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;p&gt;Content 1&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;button id="next" type="button" class="btn btn-primary"&gt;Next&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Upon clicking on the Next button, the Content 1 will hide and the next content will show up.</p>
  
  <p>That is working fine. Here's the js:</p>
  
  <pre><code>$('#next').click(function(){
    $('#myModal .modal-body').html('&lt;p&gt;Content 2&lt;/p&gt;');
  });
  </code></pre>
  
  <p>Now if I close the modal, and re-open back the modal. It is displaying the Content 2 instead of showing the Content 1 as the intial content.</p>
  
  <p>How do I make the modal to display the Content 1 as the initial content whenever I open the modal? Please help me.</p>