Title: Using jQuery in this plugin
Last modified: August 30, 2016

---

# Using jQuery in this plugin

 *  Resolved [Marek](https://wordpress.org/support/users/marek_wordpress/)
 * (@marek_wordpress)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/using-jquery-in-this-plugin/)
 * Hi,
 * I want to use jQuery in this plugin, but I do not know how to write it.
    I wrote
   this (as an example):
 *     ```
       <script type="text/javascript">
   
           jQuery(function($) {
   
           var firstLink = $('navigation a').first();
   
           firstLink.hide();
   
           });
   
       </script>
       ```
   
 * but it doesn´t work.
 * Thank you for your response.
 * [https://wordpress.org/plugins/css-javascript-toolbox/](https://wordpress.org/plugins/css-javascript-toolbox/)

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

 *  Plugin Author [wipeoutmedia](https://wordpress.org/support/users/wipeoutmedia/)
 * (@wipeoutmedia)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/using-jquery-in-this-plugin/#post-6854884)
 * Hi Marek,
 * Let me give you a quick jQuery example:
 * Firstly create a code block, call it “Slider Test – HTML” and add this code:
 *     ```
       <div class="show_hide"><a href="#">Show/hide</a></div>
       <div class="slidingDiv">
       Fill this space with really interesting content. <a href="#" class="hideMe">hide</a></div>
       ```
   
 * There is no need to assign this HTML code block because we will output it with
   a shortcode.
 * Then create another code block for your CSS and call it something like “Slider
   Test – CSS”, then and add this code:
 *     ```
       <style type="text/css">
       .slidingDiv {
           height:300px;
           background-color: #ededed;
           padding:20px;
           margin-top:10px;
           border-bottom:5px solid #3399FF;
       }
   
       .show_hide {
           display:none;
       }
       </style>
       ```
   
 * You will want to assign this to the Page or Post that you created for your jQuery
   script – let’s say it was called “Slider Test”.
 * Next you create you last code block, which is a JavaScript block for your jQuery,
   call it something like “Slider Test – JS”, and add this code:
 *     ```
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
       <script type='text/javascript'>
       $(window).load(function(){
           $(".slidingDiv").hide();
           $(".show_hide").show();
   
           $('.show_hide').click(function(){
               $(this).next().slideToggle();
           });
   
           $('.hideMe').click(function(){
               $(this).parent().slideUp();
           });
       });
       </script>
       ```
   
 * Make sure all of your code blocks are saved and then go into your “Slider Test”
   page or post and add this shortcode in the editor.
    `[cjtoolbox name='Slider 
   Test - HTML' ] [/cjtoolbox]`
 * And update your page/post and view it. You are now running a jQuery script on
   your website.
    Hope that helps.
 * Regards,
    Damian Baker
 *  Plugin Author [wipeoutmedia](https://wordpress.org/support/users/wipeoutmedia/)
 * (@wipeoutmedia)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/using-jquery-in-this-plugin/#post-6854885)
 * Hi Marek,
 * Let me give you a quick jQuery example:
 * Firstly create a code block, call it “Slider Test – HTML” and add this code:
 *     ```
       <div class="show_hide"><a href="#">Show/hide</a></div>
       <div class="slidingDiv">
       Fill this space with really interesting content. <a href="#" class="hideMe">hide</a></div>
       ```
   
 * There is no need to assign this HTML code block because we will output it with
   a shortcode.
 * Then create another code block for your CSS and call it something like “Slider
   Test – CSS”, then and add this code:
 *     ```
       <style type="text/css">
       .slidingDiv {
           height:300px;
           background-color: #ededed;
           padding:20px;
           margin-top:10px;
           border-bottom:5px solid #3399FF;
       }
   
       .show_hide {
           display:none;
       }
       </style>
       ```
   
 * You will want to assign this to the Page or Post that you created for your jQuery
   script – let’s say it was called “Slider Test”.
 * Next you create you last code block, which is a JavaScript block for your jQuery,
   call it something like “Slider Test – JS”, and add this code:
 *     ```
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
       <script type='text/javascript'>
       $(window).load(function(){
           $(".slidingDiv").hide();
           $(".show_hide").show();
   
           $('.show_hide').click(function(){
               $(this).next().slideToggle();
           });
   
           $('.hideMe').click(function(){
               $(this).parent().slideUp();
           });
       });
       </script>
       ```
   
 * Make sure all of your code blocks are saved and then go into your “Slider Test”
   page or post and add this shortcode in the editor.
    `[cjtoolbox name='Slider 
   Test - HTML' ] [/cjtoolbox]`
 * And update your page/post and view it. You are now running a jQuery script on
   your website.
    Hope that helps.
 * Regards,
    Damian Baker

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

The topic ‘Using jQuery in this plugin’ is closed to new replies.

 * ![](https://ps.w.org/css-javascript-toolbox/assets/icon-256x256.gif?rev=3132209)
 * [CSS & JavaScript Toolbox](https://wordpress.org/plugins/css-javascript-toolbox/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/css-javascript-toolbox/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/css-javascript-toolbox/)
 * [Active Topics](https://wordpress.org/support/plugin/css-javascript-toolbox/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/css-javascript-toolbox/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/css-javascript-toolbox/reviews/)

## Tags

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

 * 2 replies
 * 2 participants
 * Last reply from: [wipeoutmedia](https://wordpress.org/support/users/wipeoutmedia/)
 * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/using-jquery-in-this-plugin/#post-6854885)
 * Status: resolved