slide toggle jquery - show a paragraph when clicking or hovering an image

Question

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:

      <script      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"type="text/javascript"></script>
<script>
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;
});
});
</script>

<p>Welcome!</p>

<h2>Choose your category</h2>

<div id="front-page">
<div id="front-page-row">
<div id="front-page-cell">
<p><img src="images/running.png" alt="Running" class="category"/></p>
<p class="toggle">List of events<br/>bldasfblda<br/>bdwfbwef</p>
</div>

<div id="front-page-cell">
<p><img src="images/mtb.png" alt="MountainBike" class="category"/></p>
<p class="toggle">List of events<br/>bldasfblda<br/>bdwfbwef</p>
</div>

<div id="front-page-cell">
<p><img src="images/music.png" alt="Music" class="category"/></p>
<p class="toggle">List of events<br/>bldasfblda<br/>bdwfbwef</p>
</div>
</div>
</div>

Nothing happens when I click the image

Answer 1

I would first hide the .toggle elements with CSS, so they're immediately made invisible. Secondly, I would avoid using #front-page-cell over and over as an ID, and instead convert it to a classname, and use it as a CSS selector.

<style>
  .toggle { display: none }
</style>
<script>
  jQuery.noConflict();
  jQuery(function($){
    $(".front-page-cell").on("click", "img.category", function(){
      $(this).closest(".front-page-cell").find(".toggle").toggle("slow");
    });
  });
</script>

Demo: http://jsbin.com/evomay/edit#javascript,html

Answer 2

I think for your code part is suppose to be like below:

<script>
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).parent().next(".toggle").slideToggle("slow");
return true;
});
});
</script>

Because next(selecetor) is looking for sibling. And .toggle is sibling of p that parent of img