Want to use jQuery UI Widgets in Wordpress but don't know where to put the code/function

Want to use jQuery UI Widgets in Wordpress but don't know where to put the code/function

Hi I have installed  jQuery UI Widgets in my Wordpress site. I can see all the script in the page source code. While I can see the code " jQuery(document).ready(function($){ //Add jQuery code here…}); " in the admin page of the extension with all the possible effects, I can't figure out where to put that code to make it work.

I have then try it with jQuery(document).ready(function($){$( "#accordion" ).accordion();});

I have tried all day to make something appended. I've tried to put it in the function.php, in the footer.php, nothing appended. I've also tried in creating a .js file, where I  have put the script, and tried to insert this file in the function.php like any others I found there. Niet. 

I have created a custom css file (which I call successfully from the function.php) where I put the IDs I need to have an action on. But while the css is successfully called, I can't tell for the .js file because I don't know if I am at the good place.

I have tried with this simple code. I add this css style #draggable { width: 150px; height: 150px; padding: 0.5em; } in my css file. I can see it works for the css. But not the script. So where goes that script and function to get it work? Thank you for help.

 

  

   <head>
  

 

 

  

    <meta charset="utf-8">
  

 

 

  

    <title>jQuery UI Draggable - Default functionality</title>
  

 

 

  

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  

 

 

  

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  

 

 

  

    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  

 

 

  

    <link rel="stylesheet" href="/resources/demos/style.css">
  

 

 

  

    <style>
  

 

 

  

    #draggable { width: 150px; height: 150px; padding: 0.5em; }
  

 

 

  

    </style>
  

 

 

  

    <script>
  

 

 

  

    $(function() {
  

 

 

  

    $( "#draggable" ).draggable();
  

 

 

  

    });
  

 

 

  

    </script>
  

 

 

  

   </head>
  

 

 

  

   <body>
  

 

 

  

    
  

 

 

  

   <div id="draggable" class="ui-widget-content">
  

 

 

  

    <p>Drag me around</p>
  

 

 

  

   </div>