title: slide toggle jquery - show a paragraph when clicking or hovering an image
body: <p>Right,
  I'm trying to use jQuery to show a paragraph when peoplel or hovering or clicking the image on top of the paragraph, Here is what I got so far:</p>
  
  <pre><code>      &lt;script      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"type="text/javascript"&gt;&lt;/script&gt;
  &lt;script&gt;
  jQuery.noConflict;
  jQuery(document).ready(function(){
  //Hide the tooglebox when page load
  jQuery(".toggle").hide();
  //slide up and down when hover over img
  jQuery("img").click(function(){
  // slide toggle effect set to slow you can set it to fast too.
  jQuery(this).next(".toggle").slideToggle("slow");
  return true;
  });
  });
  &lt;/script&gt;
  
  &lt;p&gt;Welcome!&lt;/p&gt;
  
  &lt;h2&gt;Choose your category&lt;/h2&gt;
  
  &lt;div id="front-page"&gt;
  &lt;div id="front-page-row"&gt;
  &lt;div id="front-page-cell"&gt;
  &lt;p&gt;&lt;img src="images/running.png" alt="Running" class="category"/&gt;&lt;/p&gt;
  &lt;p class="toggle"&gt;List of events&lt;br/&gt;bldasfblda&lt;br/&gt;bdwfbwef&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="front-page-cell"&gt;
  &lt;p&gt;&lt;img src="images/mtb.png" alt="MountainBike" class="category"/&gt;&lt;/p&gt;
  &lt;p class="toggle"&gt;List of events&lt;br/&gt;bldasfblda&lt;br/&gt;bdwfbwef&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="front-page-cell"&gt;
  &lt;p&gt;&lt;img src="images/music.png" alt="Music" class="category"/&gt;&lt;/p&gt;
  &lt;p class="toggle"&gt;List of events&lt;br/&gt;bldasfblda&lt;br/&gt;bdwfbwef&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Nothing happens when I click the image</p>