Although I am a beginner in Javascript coding, I am eager to learn more about it.
I stumbled upon some tutorials on creating collapse/expand <div> blocks. After testing the code on jsfiddle, I found that it works fine there. You can find the code here
Unfortunately, I'm facing an issue where the code doesn't work on my live website.
Initially, I inserted all the Javascript and HTML code in the WordPress Page editor. Later on, I moved the Javascript to the header. I suspect that the source of the code might be causing the problem, but I'm not entirely sure.
Below is the snippet of Javascript code I inserted in the header.php:
<script type="text/javascript" language="javascript" src="http://example.com/wp-content/themes/crimson/scripts/jquery.min.js">
function toggle2(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if (ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "expand";
}
else {
ele.style.display = "block";
text.innerHTML = "collapse";
}
}
function toggle3(contentDiv, controlDiv) {
if (contentDiv.constructor == Array) {
for (i = 0; i < contentDiv.length; i++) {
toggle2(contentDiv[i], controlDiv[i]);
}
}
else {
toggle2(contentDiv, controlDiv);
}
}
</script>
The HTML code remains the same as the one in the fiddle HTML panel and it is displayed on a WordPress page.
I would appreciate any insights on what could be wrong with this code. Could it be related to the source of the javascript code?
Upon checking the Chrome console, I received the following error message:
Uncaught ReferenceError: toggle2 is not defined example.com:103 onclick
The main question that puzzles me is why the code functions correctly on jsfiddle using either mootools or jquery frameworks, but fails to work on the live site?
UPDATE: I have made adjustments to the script tags, however, the issue persists.