Title: How to insert Javascript snippet
Last modified: August 20, 2016

---

# How to insert Javascript snippet

 *  [matthisco](https://wordpress.org/support/users/matthisco/)
 * (@matthisco)
 * [14 years, 1 month ago](https://wordpress.org/support/topic/how-to-insert-javascript-snippet/)
 * Hi Folks,
 * Can someone please tell me where to put a basic jquery hide/show script?
 * I’ve added jquery in the header using:
 * `<?php wp_enqueue_script("jquery"); ?>`
 * But where do I put the script itself?
 *     ```
       <script type="text/javascript">
       var $j = jQuery.noConflict();
   
       $j(document).ready(function() {
   
       function togglebox(id)
       {
         var e = document.getElementById(id);
   
         if (e.style.display == 'block')
         e.style.display = 'none';
         else
         e.style.display = 'block';
       }
   
       });
       </script>
       ```
   
 * Please dont direct to these pages as I’ve read them numerous times and they don’t
   help. Thankyou
 * [http://codex.wordpress.org/Using_Javascript](http://codex.wordpress.org/Using_Javascript)

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

 *  Thread Starter [matthisco](https://wordpress.org/support/users/matthisco/)
 * (@matthisco)
 * [14 years, 1 month ago](https://wordpress.org/support/topic/how-to-insert-javascript-snippet/#post-2711859)
 * I keep getting the error:
 * Timestamp: 26/04/2012 11:55:14
    Error: togglebox is not defined Line: 1
 * Anyone?
 * Thanks in advance
 *  Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * (@keesiemeijer)
 * [14 years, 1 month ago](https://wordpress.org/support/topic/how-to-insert-javascript-snippet/#post-2711862)
 * [http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Load_a_script_from_your_theme_which_depends_upon_a_WordPress_Script](http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Load_a_script_from_your_theme_which_depends_upon_a_WordPress_Script)
 * remove `wp_enqueue_script("jquery");` from the header.
    Put your script in a 
   file and call it togglebox.js. Create a folder “js” in your theme folder and 
   put togglebox.js in it. And put this in your theme’s functions.php
 *     ```
       <?php
       function my_scripts_method() {
               wp_register_script( 'togglebox', get_template_directory_uri() . '/js/togglebox.js', array('jquery'));
       	wp_enqueue_script('togglebox');
       }
       add_action('wp_enqueue_scripts', 'my_scripts_method');
       ?>
       ```
   
 * This way jquery and togglebox.js are called in the header.
 *  Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * (@keesiemeijer)
 * [14 years, 1 month ago](https://wordpress.org/support/topic/how-to-insert-javascript-snippet/#post-2711863)
 * When using jQuery you also can use toggle(): [http://api.jquery.com/toggle/](http://api.jquery.com/toggle/)
 *  Thread Starter [matthisco](https://wordpress.org/support/users/matthisco/)
 * (@matthisco)
 * [14 years, 1 month ago](https://wordpress.org/support/topic/how-to-insert-javascript-snippet/#post-2711870)
 * Thankyou so much for your reply! This is slowly driving me mad!
 * Now I have this in the funcions php:
 *     ```
       function my_scripts_method() {
               wp_register_script( 'togglebox', get_template_directory_uri() . '/js/togglebox.js', array('jquery'));
       	wp_enqueue_script('togglebox');
       }
       add_action('wp_enqueue_scripts', 'my_scripts_method');
       ```
   
 * Nothing in my header.php
 * And this in my page:
 *     ```
       <a onclick="visibilityToggle('sandwell');"  href="" style="color:black;">sandwell</a>
   
       <div id="sandwell">
       test
       </div>
       ```
   
 * I get the error:
 * Error: visibilityToggle is not defined
    Source File: [http://www.blackcountry.nhs.uk/beta/about-us/](http://www.blackcountry.nhs.uk/beta/about-us/)
   Line: 1
 * Can you please help?
 * Many thanks, really appreciate it.
 *  Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * (@keesiemeijer)
 * [14 years, 1 month ago](https://wordpress.org/support/topic/how-to-insert-javascript-snippet/#post-2711878)
 * Well I see jQuery and togglebox.js in your header.
    try it with this in your 
   togglebox.js:
 *     ```
       jQuery(document).ready( function($) {
         var paragraph = $("<p>");
         var link = $('<a id="toggle_sandwell">Sandwell</a>');
         paragraph.append(link);
         $(".entry-content").prepend(paragraph);
   
         $(link).click(function (e) {
           e.preventDefault();
           $("#sandwell").toggle();
         });
       });
       ```
   
 * and remove your link from your page template file. This way when people are browsing
   with javascript turned off they don’t get to see the link.
 * If you need this only on that page you can use is_page() in the first enqueue
   code
 *     ```
       if(is_page(2)){
       wp_enqueue_script('togglebox');
       }
       ```
   
 *  Thread Starter [matthisco](https://wordpress.org/support/users/matthisco/)
 * (@matthisco)
 * [14 years, 1 month ago](https://wordpress.org/support/topic/how-to-insert-javascript-snippet/#post-2711884)
 * Thanks very much for your reply.
 * I’d like to pass the id of the element to the function and use this parameter
   to toggle the hide show, so I can toggle any element in the page using the same
   function.
 * Can I just use some really simple Jquery like this?
 *     ```
       function togglebox(id){
         var e = document.getElementById(id);
   
         if (e.style.display == 'block')
         e.style.display = 'none';
         else
         e.style.display = 'block';
       }
       ```
   
 * Thanks so much for your help
 *  Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * (@keesiemeijer)
 * [14 years, 1 month ago](https://wordpress.org/support/topic/how-to-insert-javascript-snippet/#post-2711887)
 * Ok, when showing a link to toggle content format it like so:
 *     ```
       <div class="toggle">
         <a class="toggle-link" href="#">toggle</a>
         <div class="toggle-container">
         <!-- container that gets toggled -->
         <?php the_content(); ?>
         </div>
       </div>
       ```
   
 * Put this in your theme’s stylesheet to hide the toggle links by default:
 *     ```
       .toggle-link {
         display: none;
       }
       ```
   
 * And use this in togglebox.js to toggle multiple elements:
 *     ```
       jQuery(document).ready( function($) {
   
         $("a.toggle-link").show();
         $("a.toggle-link").click(function (e) {
           e.preventDefault();
           $(this).next(".toggle-container").toggle();
         });
       });
       ```
   
 *  Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * (@keesiemeijer)
 * [14 years, 1 month ago](https://wordpress.org/support/topic/how-to-insert-javascript-snippet/#post-2711909)
 * if you have the toggle link inside another element (`<p>,<h2>, etc`) you need
   to change this:
 *     ```
       $(this).next(".toggle-container").toggle();
       ```
   
 * to this:
 *     ```
       $(this).parents('.toggle').children(".toggle-container").toggle();
       ```
   
 * or this:
 *     ```
       $(this).parent().next(".toggle-container").toggle();
       ```
   
 *  Thread Starter [matthisco](https://wordpress.org/support/users/matthisco/)
 * (@matthisco)
 * [14 years ago](https://wordpress.org/support/topic/how-to-insert-javascript-snippet/#post-2712088)
 * Thanks very much for your help

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

The topic ‘How to insert Javascript snippet’ is closed to new replies.

## Tags

 * [code](https://wordpress.org/support/topic-tag/code/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [snippet](https://wordpress.org/support/topic-tag/snippet/)
 * [toggle](https://wordpress.org/support/topic-tag/toggle/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 9 replies
 * 2 participants
 * Last reply from: [matthisco](https://wordpress.org/support/users/matthisco/)
 * Last activity: [14 years ago](https://wordpress.org/support/topic/how-to-insert-javascript-snippet/#post-2712088)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics