jQuery UI Controls + show() not working
I have a container that has a series of jQuery UI sliders and a container that will hold results:
- <div id="question-set-1">
<ol id="plan-questions">
<li><input type="checkbox" /> I am <strong>only</strong> interested in viewing plans that allow me to choose my own specialists.</li>
<li><input type="checkbox" /> I am <strong>not</strong> interested in viewing plans that provide financial incentives and/or tax advantages
<li>
How important is it to have a lower per-paycheck cost?
<div id="slider1" class="slider"></div>
<div class="scale">1 2 3 4 5</div>
</li>
<li>
How important is it to have a low deductible?
<div id="slider2" class="slider"></div>
<div class="scale">1 2 3 4 5</div>
</li>
<li>
How important is it to have a low office visit cost?
<div id="slider3" class="slider"></div>
<div class="scale">1 2 3 4 5</div>
</li>
</ol>
</div> <div id="results">
<h2>Your Results:</h2>
</div>
I want the div with the sliders to hide and the results to show. However, when I run the following:
- <script type="text/javascript">
$(document).ready(function() {
$('#slider1').slider( {min:1,max:5,value:1} );
$('#slider2').slider( {min:1,max:5,value:1} );
$('#slider3').slider( {min:1,max:5,value:1} );
});
$('#cmdSubmit').click(function() {
$('#question-set-1').hide('slide',500);
$('#results').show('slide',500);
});
$('#cmdBack').click(function() {
$('#question-set-1').show('slide',500);
$('#results').hide('slide',500);
});
</script>
The animation does work. The questions div hides and the results show. But if I click my cmdBack button, the question div comes back, but the sliders are gone. In my CSS, I default the results div to be display:none. I know you can go the route of not using show() or hide(), by using .css('visibility','hidden'/'visible'), but you lose the animation effects. I know people have to be implementing this kind of functionality all of the time. Is there a standard way of handling the show() and hide() functions where it doesn't break the jQuery UI controls?