Question

I’d like to execute a JQuery toggle function (it toggles an input field to make it accessible to the client) only if a certain condition is met. (I’m testing for the condition using JavaScript.) Can I do this? For some reason, the JQuery toggle function doesn’t work when I set it inside the JavaScript function, so I’m not sure if I’m doing something wrong, or if this can’t be done at all.

<script type="text/javascript">
function conditionalToggle()
{
   if (conditionIsMet)
   {
      // JQuery toggle call here
   }
}
</script>

Answer 1

You probably don’t use jQuery right, or don’t execute the function, or (the most common mistake of new jQuery users) don’t wait for the DOM to be ready:

function foo(){
    if ("foo" === "foo")
        $('#elementId').toggle();
}

$(function(){ // functions inside $() runs after the DOM is ready.
    foo();
});

Where elementId is a place holder to your element id.
Simple DEMO

---

Note that you can use this toggle overload:

$('#elementId').toggle(showTheElementOrNot);

toggle( showOrHide )
showOrHide A Boolean indicating whether to show or hide the elements.

jQuery docs