title: Javascript and JQuery conflict
body: <p>I'm not very expert in using javascript and jquery but I'm working with them for a client.<br>
  I have encountered a problem using two script: the first one makes a top panel sliding, the second is in a form. This one is used in order to hide or show a particular field basing on the drop down list choice. </p>
  
  <p>I've found that if I disable the first script (the panel), the second script is working fine and vice versa. I tried usign JQuery noConflict() in the head of the page but nothing happened. </p>
  
  <p>Here the code of the first script (sliding panel): </p>
  
  <pre><code>$(document).ready(function () {
      // Lets make the top panel toggle based on the click of the show/hide link  
      $("#sub-panel").click(function () {
          // Toggle the bar up 
          $("#top-panel").slideToggle();
          // Settings
          var el = $("#shText");
          // Lets us know whats inside the element
          var state = $("#shText").html();
          // Change the state  
          state = (state == 'Nascondi' ? '&lt;span id="shText"&gt;Entra&lt;/span&gt;' : '&lt;span id="shText"&gt;Nascondi&lt;/span&gt;');
          // Finally change whats insdide the element ID
          el.replaceWith(state);
      }); // end sub panel click function
  }); // end on DOM
  </code></pre>
  
  <p>Here the JS code for the form (hide/show field): </p>
  
  <pre><code>$document.addEvent('domready', function () {
  
      $('motivo_contatto').addEvent('change', function () {
          if ($('motivo_contatto').value == 'Invia CV') {
              $('upload_file').style.visibility = 'visible';
          } else {
              $('upload_file').style.visibility = 'hidden';
          }
      });
      $('upload_file').style.visibility = 'hidden';
  });
  
  });
  </code></pre>
  
  <p>Can anyone help me ? Thank you and have a nice day! </p>