JQuery Toggle with CSS
I have开发者_开发知识库 replicated a toggle functionality from this site: http://www.williamsprofessionalpainting.com/FAQ.php
Here is the updated version which renders the basic toggle function with minimum CSS:
http://jsfiddle.net/NinjaSk8ter/yXNmx/
Your code is working fine, but jsFiddle is wrapping it in a function. In other words, it ends up looking something like:
window.onload = function() {
function ToggleFAQ(Ans) {
...
}
};
The function is defined within the onload handler, so when your onclick tries to call it, it doesn't exist.
If you change the drop-down on the top-left of your fiddle to "no wrap", it all works fine. See this modified version.
On your JSFiddle - if you change the wrap method to "no wrap(head)" and it simply works.
Alternatively - you can declare the function as a global var:
ToggleFAQ = function (Ans)
{
//..
}
what renders as
jQuery(document).ready(function(){
//when defined like this - ToggleFAQ will still be visible when the
//"ready" event finishes.
ToggleFAQ = function (Ans)
{
//..
}
}
the wrap you selected puts your code in a function passed to jQuery's "dom-ready" event - and that's a closure that once is executed - all local variables are "vaporized".
精彩评论