Question

$(document).ready(function(){ 
    $("#CO_createAccount").click( function (){ 
        if(this.checked){
            $(".CO_accountForm").show();  
        } else {
            $(".CO_accountForm").hide();  
        }
    });
});

and I have the css set for “.CO_accountForm” set to “display:none;”

But, I want the hidden element to be visible if javascript is turned off. I assume I can do this by adding a hidden class the above, but how would I go about this?

Thanks!

Answer 1

Remove the display:none attribute for the ".CO_accountForm" and instead hide/set the display:none attribute via javascript in the document.ready event.

i.e.:

$(document).ready(function(){      
    // hide the form using JS so that if the browser 
    // doesn't support JS then the form is always displayed.
    $(".CO_accountForm").hide(); 
    $("#CO_createAccount").click( function (){          
        if(this.checked){             
            $(".CO_accountForm").show();           
        } else {             
            $(".CO_accountForm").hide();           
        }     
    }); 
});