CODEWITHSUNDEEP
jqueryaccessibilitytogglehideshow
Jason
Jason

Reputation: 7682

make show/hide accessible if javascript is off

$(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!

Upvotes: 1

Views: 608

Answers (3)

Chandu
Chandu

Reputation: 82933

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();           
        }     
    }); 
});

Upvotes: 3

Dave H
Dave H

Reputation: 11

Why not just add a <noscript> tag around the form in question? This would ensure that the form is displayed since you wouldn't be able to fire off any javascript anyways.

Upvotes: 1

ek_ny
ek_ny

Reputation: 10243

Have element visible by default-- but add a class through jquery which hides them.

Upvotes: 0

Related Questions