How to hide a modal and show another one using jquery?
<p>I open a modal, then on click of a div within the modal I want to close that modal and open another one. But when I do this it closes the first modal and only shows the background of the second modal with the body not displayed.</p>

<p>My HTML is:</p>

<pre><code>&lt;div id="test-modal" class="modal hide fade" data-keyboard="true"&gt;
    &lt;div class="modal-body"&gt;
       &lt;div id="option"&gt;&lt;p&gt;Click here to show the next modal&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div id="test-modal2" class="modal hide fade" data-keyboard="true"&gt;
    &lt;div class="modal-body"&gt;
       &lt;p&gt;modal show after a hide doesn't work?&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt; 
</code></pre>

<p>and my jquery is:</p>

<pre><code>$('.option').click(function() {
    $('#test-modal').modal('hide');
    $('#test-modal2').modal('show');

});
</code></pre>