In my quiz, there is a span that displays the sum of checked checkboxes. Depending on the value in the span, I want to show or hide two different divs. Currently, my code hides the divs but does not show them. Please help!
<div class="results center">
Your Score Is: <span class="yes_results">0</span>
</div>
<div id="less">less div</div>
<div id="more">more div</div>
The span value, representing the score, is calculated using the following code:
$(document).ready(function() {
$('.yes').change(function(){
var yes = $('.yes:checked').length;
var no = $('.no:checked').length;
$('.yes_results').text(yes);
$('.no_results').text(no);
})
});
Here is the code that successfully hides the divs but does not show them:
$(function() {
var x = $("span.yes_results").text();
if (x == 0){
$("div#less").hide();
$("div#more").hide();
}
else if ((x > 0) && (x < 4)) {
$("div#less").show();
$("div#more").hide();
}
else if (x > 3) {
$("div#less").hide();
$("div#more").show();
};
});