This code works fine (it hides or reveals the HTML elements with classes ‘PA’, ‘PF’ etc.):
<input type="button" id="moreLess" value="woops">
<script>
$(document).ready(function () {
$("#moreLess").val($(".TA").is(':visible') ? "-><-" : "<-->");
$("#moreLess").on('click', function () {
$(".PF, .PA, .TF, .TA").toggle();
$("#moreLess").val($(".TA").is(':visible') ? "-><-" : "<-->");
});
});
</script>
But the exact same code, when included in a php class file (which basically just prints a lot of HTML) does not work.
The code is properly escaped and the resulting HTML is identical to the code which is written by the original method.
So 2 identical JQuery scripts, but the one that is written inside the php class does not work.
To be exact, the ‘.toggle()’ does not work – the reset of the input value from “woops” to “<–>” is executed.
I’ve searched around, but can’t find any clue as to why this doesn’t work.
What is particularly confusing is the fact that the html generated by the 2 methods appears to be identical in every respect.
To clarify, I allowed both versions to create the HTML and :
<input type="button" id="moreLess" value="woops">
<script>
$(document).ready(function () {
$("#moreLess").val($(".TA").is(':visible') ? "-><-" : "<-->");
$("#moreLess").on('click', function () {
$(".PF, .PA, .TF, .TA").toggle();
$("#moreLess").val($(".TA").is(':visible') ? "-><-" : "<-->");
});
});
</script>
<input type="button" id="moreLess" value="woops">
<script>
$(document).ready(function () {
$("#moreLess").val($(".TA").is(':visible') ? "-><-" : "<-->");
$("#moreLess").on('click', function () {
$(".PF, .PA, .TF, .TA").toggle();
$("#moreLess").val($(".TA").is(':visible') ? "-><-" : "<-->");
});
});
</script>