0

I am trying to use something directly inside a WordPress post similar to the fiddle I created here http://jsfiddle.net/t304o8aL/

I have read that WordPress doesn't like the use of $ so I replaced them with jQuery

and then placed the following code using the text editor

<div class="show_hide"><img id="aImg" class="aligncenter size-full wp-image-1170 im" src="http://lorempixel.com/400/200/nature" alt="a-series-main" /></div>

<div class="slidingDiv"><img id="aInfo" class="aligncenter size-full wp-image-1171" src="http://lorempixel.com/400/200/food" alt="a-series-detail" /></div>

<script> 
jQuery(window).load(function(){
jQuery(".slidingDiv").hide();
jQuery(".show_hide").show();

jQuery('.show_hide').click(function(){
    jQuery(this).next().slideToggle();
});


jQuery('.slidingDiv').click(function(){
    jQuery('.slidingDiv').slideUp();
});
});
</script>

The jQuery is being loaded in the head of the document, but in the source code the <script> tag is being wrapped in multiple <p> tags and I am not sure how to stop that from happening.

<p><script>
jQuery(window).load(function(){
jQuery(".slidingDiv").hide();
jQuery(".show_hide").show();</p>
<p>jQuery('.show_hide').click(function(){
    jQuery(this).next().slideToggle();
});</p>
<p>jQuery('.slidingDiv').click(function(){
    jQuery('.slidingDiv').slideUp();
});
});
</script></p>

Thanks in advance for any help!

  • Hi! So it's not working? Do you get any errors in the developer's console? My first guess would be that jQuery is loaded in your theme's footer, so trying to use it in your post, before the footer prints out, will generate an error to the effect that jQuery is undefined or not a function... – MacPrawn Jan 26 '17 at 21:35
  • @MacPrawn : Sorry I should have clarified that I will update the question. jQuery is being loaded in the head section. – gigelsmith Jan 26 '17 at 21:40
  • Perfect, thank you. But so... What's not working? Any errors in the debug console? – MacPrawn Jan 26 '17 at 21:41
  • No errors present. The image isn't hiding and no slideToggle is present like in the jsfiddle – gigelsmith Jan 26 '17 at 21:42
  • All right - and if you look at the page's source code in your browser, do the <script> tag look ok? I'm not sure WP will let you use javascript in post content - you might need to ass a plugin for that. – MacPrawn Jan 26 '17 at 21:44
0

Ok, so based on your comments, the problem as those pesky

tags... WordPress is nasty with those, sometimes.

As I said, it might be worth looking into a plugin that lets you add javascript to specific posts/pages.

In the meantime, I suspect things should work if you put your whole javascript tag on one line (no newlines)... Not easy to read, but it should prevent WP from adding

tags in your javascript:

<script> jQuery(window).load(function(){ jQuery(".slidingDiv").hide(); jQuery(".show_hide").show(); jQuery('.show_hide').click(function(){ jQuery(this).next().slideToggle(); }); jQuery('.slidingDiv').click(function(){ jQuery('.slidingDiv').slideUp(); }); });</script>

Hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.