Uncaught ReferenceError: function is not defined - Wordpress specific issue

Question

So I've been trying to implement this script in a WordPress site I've been working on, but it keeps throwing the error Uncaught ReferenceError: toggle_visibility is not defined and I'm not entirely sure why as it works outside of WordPress according to other people. I've had some issues before with scripts in WordPress such as the $ needing to be swapped with jQuery etc, but I've been unsuccessful so far solving this. Basically I just need it to toggle display:block/none on two divs when the corresponding links are clicked.

function toggle_visibility(id) {
 var e = document.getElementById(id);
 if(e.style.display == 'block')
 e.style.display = 'none';
 else
 e.style.display = 'block';
}
<div id="choose-membership">
 <a href="#" onclick="toggle_visability('ms-membership-wrapper-202');">Click here for free membership</a>
 <a href="#" onclick="toggle_visability('ms-membership-wrapper-213');">Click here for Paid membership</a> 
</div>

Answer 1

Your onclick event has a typo:

onclick="toggle_visability('ms-membership-wrapper-202');"

Should be:

onclick="toggle_visibility('ms-membership-wrapper-202');"

Give that a go :)

• Moose: Ha oh dear, thats so embarrassing! Thanks for pointing that out, i clearly need more tea [caffeine] this morning!
• AshboDev: @Moose A cup of coffee is how I start my day - we've all done it ;)

Answer 2

Misspelled function. Function is toggle_visibility you put toggle_visability in your HTML.

<div id="choose-membership">
 <a href="#" onclick="toggle_visibility('ms-membership-wrapper-202');">Click here for free membership</a>
 <a href="#" onclick="toggle_visibility('ms-membership-wrapper-213');">Click here for Paid membership</a> 
</div>

• Moose: Ha oh dear, thats so embarrassing! Thanks for pointing that out, i clearly need more tea [caffeine] this morning!