title: Jquery & Joomla malfunction without reason
body: <p>I am trying to make a nice slidebox to first rate the article and then close the ratingbox to view the video. I am doing this on Joomla and using this code a little edited: <a href="http://jsfiddle.net/AetnV/72/" rel="nofollow">http://jsfiddle.net/AetnV/72/</a></p>
  
  <p>This is my version of the code:
  (The problem is on static html pages (non joomla) it works perfect, but not on Joomla I have disabled on the javascript and iframe blacklisting from JCE and global configuration but still nothing, I tried it also with other themes its same.</p>
  
  <pre><code>  &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'&gt;&lt;/script&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="/css/normalize.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="/css/result-light.css"&gt;
  
    &lt;style type='text/css'&gt;
      * { margin: 0; padding: 0; outline: none; }
  
  body { background: #CCC; margin: 0; padding: 0; font: 10px normal Arial, Helvetica, sans-serif; }
  
  /*--Main Image Area--*/
  .main_image {
      margin: 20px 0 0 20px; width: 650px; height: 400px;
      float: left;  background: white; position: relative;  overflow: hidden;
      color: #fff;
  
      moz-box-shadow: 0px 0px 4px #666; 
      -webkit-box-shadow: 0px 0px 4px #666; 
      box-shadow: 0px 0px 4px #666;
  }
  
  .main_image h2 { font-size: 2em; font-weight: normal; margin: 0 0 5px; padding: 10px; }
  .main_image p  { font-size: 1.2em; padding: 10px; margin: 0; line-height: 1.6em; }
  .main_image .desc  { position: absolute; bottom: 0; left: 0; width: 100%; display: none;}
  .main_image .block { height: 410px; width: 100%; background: #111; border-top: 1px solid #000; }
  .main_image a.collapse {
      background: black; height: 30px; width: 650px;
      position: absolute; top: -30px; right: 0px;
      font: normal 12px arial; color: white; text-align: center;
  }
  .main_image a.show { background-position: left bottom; } 
    &lt;/style&gt;
  
  
  
  &lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
  $(window).load(function(){
  $(document).ready(function() {
  
      //Show Banner
      $(".main_image .desc").show(); //Show Banner
      $(".main_image .block").animate({ opacity: 1 }, 1 ); //Set Opacity
  
  
      //Toggle Teaser
      $("a.collapse").click(function(){
          $(this).next().slideToggle();
          $(this).toggleClass("show");
      });
  
  
  });//Close Function  
  });//]]&gt;  
  
  &lt;/script&gt;
  
  
    &lt;div class="main_image"&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;center&gt;&lt;img src="http://upload.macromedia.com/exchange/flash/previews/300x200_200x200.jpg" width=205" height="205"&gt;&lt;/a&gt;&lt;/center&gt;
      &lt;div class="desc" style="display: block; "&gt;
          &lt;a href="#" class="collapse show"&gt;Click Me!&lt;/a&gt;
          &lt;div class="block" style="opacity: 1; display: none; "&gt;
  
              &lt;center&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;iframe width="420" height="315" src="http://www.youtube.com/embed/AxcM3nCsglA" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;&lt;/iframe&gt;
              &lt;/center&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help is greatly appreciated.
  Thank you</p>
  
  <p>*Also if you have a better way to suggest to do what I am trying to do please tell me. Its my first attempt I was thinking to make it 2divs and onclick one would overlap the other but I am afraid of spiders thinkings its hidden text etc.. </p>