Title: javascript not working in page or post
Last modified: August 21, 2016

---

# javascript not working in page or post

 *  [bjerreandersen](https://wordpress.org/support/users/bjerreandersen/)
 * (@bjerreandersen)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/javascriptnot-working/)
 * I’ve been trying for a whole day getting this to work – now i rely on you… I 
   got a beautiful little javascript here:
 * [http://bjerreandersen.dk/kom/kompetence.htm ](http://bjerreandersen.dk/kom/kompetence.htm)
 * Click on one the blue words and some more texts folds out … and in again (you
   probably can’t understand it as it is in danish…)
 * But I’m having trouble to make it show properly inside a wordpress page. I’m 
   testing here: [http://bjerreandersen.dk/test4](http://bjerreandersen.dk/test4)
 * I’ve tried almost everything: putting the script in trough a html-shortcode, 
   some javascript-plugins etc. If I just insert the script in the texteditor, there
   somehow is produced some p-tags, that spoils it all…
 * Someone knows how to do this, please?

Viewing 10 replies - 1 through 10 (of 10 total)

 *  [Keith](https://wordpress.org/support/users/keithdriscoll/)
 * (@keithdriscoll)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/javascriptnot-working/#post-4035323)
 * Goto your themes folder and open functions.php
 * add this:
 *     ```
       function bjerreandersen_load_js() {
   
       wp_register_script('bjerreandersen', get_template_directory_uri() . '/js/hidden.js', array('jquery'), false, true);
       wp_enqueue_script('bjerreandersen');
   
       }
   
       add_action( 'wp_enqueue_scripts', 'bjerreandersen_load_js' );
       ```
   
 * Then you need to copy hidden.js from ‘`http://bjerreandersen.dk/kom/hidden.js`‘
   to ‘wp-content/themes/good-bones/js’
 * And that should do it 🙂
 * Your script is not loading. WP does things a little differently than traditional
   html/js type sites.
 *  Thread Starter [bjerreandersen](https://wordpress.org/support/users/bjerreandersen/)
 * (@bjerreandersen)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/javascriptnot-working/#post-4035395)
 * Thanks for the answer Keith!
 * I’ve copied hide.js (formerly known as hidden) to good-bones’ javascript folder,
   that has a little longer path than the one you suggested … and I changed that
   path in the code you gave me as well and added it in the end of functions.php(
   does this means it will load on every page/post, btw?)
 * I have also included the stylesheet for the script (which seems to be important
   for the visual part) to my custom CSS-file instead of loading it seperatly. Which
   seems to work.
 * But still something else is not working. I guess I’m confused what exactly needs
   to be included in hide.js and what can/should/must be let out.
 * Right now hide.js looks like this
 *     ```
       <script type="text/javascript">
                   $(function () {
                       $('#intro').each(function () {
                           $('span.romance-toggle').on('click', function () {
                               var _this = $(this);
                               if (_this.hasClass('clicked')) {
                                   $('#romance-' + _this.attr('rel')).hide();
                                   _this.toggleClass('clicked');
                               } else {
                                   $('#romance-' + _this.attr('rel')).fadeIn(500);
                                   _this.toggleClass('clicked');
   
                               }
                           });
                       });
   
                   });
               </script>
       ```
   
 * …and on the page (/test4) I’ve only got the styled text itself. Should I make
   a reference to a bigger java-library at some point or…?
 *  [Keith](https://wordpress.org/support/users/keithdriscoll/)
 * (@keithdriscoll)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/javascriptnot-working/#post-4035497)
 * Glad it worked! Yes, it will load on every page but you can add [conditional tags](http://codex.wordpress.org/Conditional_Tags)
   such as:
 *     ```
       <?php
       if ( is_home() ) {
           function bjerreandersen_load_js() {
   
       wp_register_script('bjerreandersen', get_template_directory_uri() . '/js/hidden.js', array('jquery'), false, true);
       wp_enqueue_script('bjerreandersen');
   
       }
   
       add_action( 'wp_enqueue_scripts', 'bjerreandersen_load_js' );
       }
       ```
   
 * In this example it would ONLY load on the homepage 🙂
 *  [Keith](https://wordpress.org/support/users/keithdriscoll/)
 * (@keithdriscoll)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/javascriptnot-working/#post-4035498)
 * What you are trying to use is called jQuery UI – which includes the ‘hide’ effect.
   This is not included by default with WP. Google hosts it on their CDN so adding
   this to your functions.php file in your theme folder will do the trick 🙂
 *     ```
       wp_register_script('jquery', ' <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>', array(), '1.10.3'); // Google CDN jQuery UI
           	wp_enqueue_script('jquery');
       ```
   
 * This code simply tells WP to load it up. The code you already have tells it to
   fire when needed but because you did not tell WP to load jQuery UI it didn’t 
   do anything 🙂
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 9 months ago](https://wordpress.org/support/topic/javascriptnot-working/#post-4035499)
 * [@bjerreandersen](https://wordpress.org/support/users/bjerreandersen/), Are you
   using [no-conflict wrappers](http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers)?
 * Are you accessing your browser’s console log so that you get an actual error 
   message ?
 *  Thread Starter [bjerreandersen](https://wordpress.org/support/users/bjerreandersen/)
 * (@bjerreandersen)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/javascriptnot-working/#post-4035501)
 * [@keith](https://wordpress.org/support/users/keith/) Ok – I tried that as well.
   But it still doen’t work, I’m afraid.
 * I’m a total newbie in Javascript, so would really appreciate a walktrough – which
   code to put where? What exactly should go in hide.js, what should be put in the
   actual WP-page, the script is going to work on (I only need it on one page for
   now…). The code that is working outside WP is in its entirety:
 *     ```
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></script>
               <script type="text/javascript">
                   $(function () {
                       $('#intro').each(function () {
                           $('span.romance-toggle').on('click', function () {
                               var _this = $(this);
                               if (_this.hasClass('clicked')) {
                                   $('#romance-' + _this.attr('rel')).hide();
                                   _this.toggleClass('clicked');
                               } else {
                                   $('#romance-' + _this.attr('rel')).fadeIn(500);
                                   _this.toggleClass('clicked');
   
                               }
                           });
                       });
   
                   });
               </script>
       ```
   
 * I’ve already tried to use that code inside the WP-page itself. But no matter 
   what I tried, it ended up adding some invisible <p>-tags, that screwed up the
   code. So if it’s supposed to be in the page, and not just called, how do I prevent
   those p-tags?
 * [@andrew](https://wordpress.org/support/users/andrew/): according to Firebug,
   there are no actual errors, as far as I can see… But I guess the wrappers could
   make a difference, if everything else is set correctly. So far, it didn’t do 
   the trick :-l
 * thank you in advance!
 *  [aparente001](https://wordpress.org/support/users/aparente001/)
 * (@aparente001)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/javascriptnot-working/#post-4035509)
 * Bjerre, I think the part you missed was this:
    Then you need to copy hidden.js
   from ‘[http://bjerreandersen.dk/kom/hidden.js&#8217](http://bjerreandersen.dk/kom/hidden.js&#8217);
   to ‘wp-content/themes/good-bones/js’
 *  [aparente001](https://wordpress.org/support/users/aparente001/)
 * (@aparente001)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/javascriptnot-working/#post-4035510)
 * Aack! I wasn’t finished typing! Let’s try again.
 * I don’t think you can put the javascript code directly in the admin side of the
   page or post. I think you have to put it in a separate file which will go inside
   the js folder. And then in the functions.php file, you give the instructions 
   how to find that file.
 * Apologies if this is wrong — I’m trying to figure out how to put javascript in
   myself.
 *  [Keith](https://wordpress.org/support/users/keithdriscoll/)
 * (@keithdriscoll)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/javascriptnot-working/#post-4035512)
 * It’s great to learn new stuff but if you just want to get it done and be on your
   way you could try this plugin [Collapse-O-Matic](http://wordpress.org/plugins/jquery-collapse-o-matic/)
   🙂
 *  Thread Starter [bjerreandersen](https://wordpress.org/support/users/bjerreandersen/)
 * (@bjerreandersen)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/javascriptnot-working/#post-4035514)
 * [@keith](https://wordpress.org/support/users/keith/) thank’s a lot for the advice–
   the plugin is a bit slower and a little less smooth than the script, but at least
   it works!
 * Now its live on bjerreandersen.dk/cv – it’s the beginning of my resume, in fact
   🙂
 * (I’ll dig into javascript another time – would be great, though, if WP had a 
   more step-by-step like guide in the codex instead of some description, that you’ll
   almost only understand if you’re that smart that you don’t need to …)
 * f

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘javascript not working in page or post’ is closed to new replies.

## Tags

 * [code](https://wordpress.org/support/topic-tag/code/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [script](https://wordpress.org/support/topic-tag/script/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 10 replies
 * 4 participants
 * Last reply from: [bjerreandersen](https://wordpress.org/support/users/bjerreandersen/)
 * Last activity: [12 years, 9 months ago](https://wordpress.org/support/topic/javascriptnot-working/#post-4035514)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics