i’m using wordpress and i’m trying to run a script created inside a wordpress page.
Outside wordpress everything works fine, but not copyed inside wp.
Google chrome debug console displays this error:
Uncaught SyntaxError: Unexpected toke ILLEGAL
the script is this one:
<script>
jQuery(document).ready(function ($) {
$("#sys1").click(function () {
$("#hub img").css("opacity", "0.3");
$("#thermostat img").css("opacity", "0.3");
$("#boiler img").css("opacity", "0.3");
$("#valve img").css("opacity", "0.3");
$("#sensor img").css("opacity", "0.3");
$("#plug img").css("opacity", "0.3");
$("#underfloor img").css("opacity", "0.3");
$("#hub img").css("opacity", "1");
$("#thermostat img").css("opacity", "1");
$("#boiler img").css("opacity", "1");
$(".products-page-system-information-container").html("<div class='products-page-system-information-added-content'>Test divs content add panel 1</div>");
$("#sys2").removeClass("active");
$("#sys3").removeClass("active");
$("#sys4").removeClass("active");
$("#sys5").removeClass("active");
$("#sys1").addClass("active");
});
});
</script>
any ideas? Thanks a lot
EDIT
here’s the full code inside my wp page:
<div class="page-content-big-title"><h1>System products</h1></div>
<div class="inner-container">
<div class="products-page-products-required-display">
<ul>
<li id="hub"><img src="../wp-content/themes/Make-child/img/placeholder.png"/> </li>
<li id="thermostat"><img src="../wp-content/themes/Make-child/img/placeholder.png" /></li>
<li id="boiler"><img src="../wp-content/themes/Make-child/img/placeholder.png" /></li>
<li id="valve"><img src="../wp-content/themes/Make-child/img/placeholder.png" /></li>
<li id="sensor"><img src="../wp-content/themes/Make-child/img/placeholder.png" /></li>
<li id="plug"><img src="../wp-content/themes/Make-child/img/placeholder.png" /></li>
<li id="underfloor"><img src="../wp-content/themes/Make-child/img/placeholder.png" /></li>
</ul>
</div>
<div class="products-page-system-selectors">
<ul>
<li id="sys1" class="active">System option</li>
<li id="sys2">System option</li>
<li id="sys3">System option</li>
<li id="sys4">System option</li>
<li id="sys5">System option</li>
</ul>
</div>
<div class="products-page-system-information-container"><div class='products-page-system-information-added-content'>Test div's content add panel 1</div></div>
</div>
<script>
jQuery(document).ready(function ($) {
$("#sys1").click(function() {
$("#hub img").css("opacity", "0.3");
$("#thermostat img").css("opacity", "0.3");
$("#boiler img").css("opacity", "0.3");
$("#valve img").css("opacity", "0.3");
$("#sensor img").css("opacity", "0.3");
$("#plug img").css("opacity", "0.3");
$("#underfloor img").css("opacity", "0.3");
$("#hub img").css("opacity", "1");
$("#thermostat img").css("opacity", "1");
$("#boiler img").css("opacity", "1");
$(".products-page-system-information-container").html("<div class='products-page-system-information-added-content'>Test divs content add panel 1</div>");
$("#sys2").removeClass("active");
$("#sys3").removeClass("active");
$("#sys4").removeClass("active");
$("#sys5").removeClass("active");
$("#sys1").addClass("active");
});
$("#sys2").click(function() {
$("#hub img").css("opacity", "0.3");
$("#thermostat img").css("opacity", "0.3");
$("#boiler img").css("opacity", "0.3");
$("#valve img").css("opacity", "0.3");
$("#sensor img").css("opacity", "0.3");
$("#plug img").css("opacity", "0.3");
$("#underfloor img").css("opacity", "0.3");
$("#hub img").css("opacity", "1");
$("#thermostat img").css("opacity", "1");
$("#valve img").css("opacity", "1");
$(".products-page-system-information-container").html("<div class='products-page-system-information-added-content'>Test div's content add panel 2</div>");
$("#sys1").removeClass("active");
$("#sys3").removeClass("active");
$("#sys4").removeClass("active");
$("#sys5").removeClass("active");
$("#sys2").addClass("active");
});
$("#sys3").click(function() {
$("#hub img").css("opacity", "0.3");
$("#thermostat img").css("opacity", "0.3");
$("#boiler img").css("opacity", "0.3");
$("#valve img").css("opacity", "0.3");
$("#sensor img").css("opacity", "0.3");
$("#plug img").css("opacity", "0.3");
$("#underfloor img").css("opacity", "0.3");
$("#hub img").css("opacity", "1");
$("#valve img").css("opacity", "1");
$("#sensor img").css("opacity", "1");
$(".products-page-system-information-container").html("<div class='products-page-system-information-added-content'>Test div's content add panel 3</div>");
$("#sys1").removeClass("active");
$("#sys2").removeClass("active");
$("#sys4").removeClass("active");
$("#sys5").removeClass("active");
$("#sys3").addClass("active");
});
$("#sys4").click(function() {
$("#hub img").css("opacity", "0.3");
$("#thermostat img").css("opacity", "0.3");
$("#boiler img").css("opacity", "0.3");
$("#valve img").css("opacity", "0.3");
$("#sensor img").css("opacity", "0.3");
$("#plug img").css("opacity", "0.3");
$("#underfloor img").css("opacity", "0.3");
$("#hub img").css("opacity", "1");
$("#thermostat img").css("opacity", "1");
$("#boiler img").css("opacity", "1");
$(".products-page-system-information-container").html("<div class='products-page-system-information-added-content'>Test div's content add panel 4</div>");
$("#sys1").removeClass("active");
$("#sys2").removeClass("active");
$("#sys3").removeClass("active");
$("#sys5").removeClass("active");
$("#sys4").addClass("active");
});
$("#sys5").click(function() {
$("#hub img").css("opacity", "1");
$("#thermostat img").css("opacity", "1");
$("#boiler img").css("opacity", "1");
$("#valve img").css("opacity", "1");
$("#underfloor img").css("opacity", "1");
$(".products-page-system-information-container").html("<div class='products-page-system-information-added-content'>Test div's content add panel 5</div>");
$("#sys2").removeClass("active");
$("#sys3").removeClass("active");
$("#sys4").removeClass("active");
$("#sys5").addClass("active");
});
});
</script>
EDIT
I solved this problem just changig the javascript code, i think that the .html(“some html tag”) is not well interpreted by wordpress.
Anyway now it works fine. Thanks
