Hiding and showing paragraphs for each image

Hiding and showing paragraphs for each image

Hi - I'm trying to have a samll caption for a series of pictures in a gallery where the caption is initially hidden for all pictures. When  a user clicks on a picture the caption shows and if they click on the picture again it closes. Also if a user clicks on any other picture the caption for a previous picture would close and the caption for the new picture would show.

Have tried this and it isn't working: Any help really appreciated!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Trial</title>
<style type="text/css">

* {
margin: 0;
padding: 0;
}
.floatleft {
width: 350px;
height: 263px;
float: left;
margin: 5px;
}
p {
color: red;
}

</style>
<script src="jQuery library/jquery-1.11.1.js"></script>
<script  src="jQuery library/jquery-migrate-1.2.1.js"></script>
<script> $(document).ready(function() {
$('gallery').click(function(){
if($(this).next().is(':visible')) {
$(this).next().animate(
  {'height':'hide'}, 'slow', 'easeOutBounce');
    } else {
      $(this).next().show()
  .siblings('section p')
  .animate({'height':'hide'}, 'slow', 'easeOutBounce');
}
  });
});
</script>
</head>

<body>
<div class="gallery">
<section  class="floatleft">
<img src="images/rome-05-sml.jpg" width="350" height="263" alt=""/>
<p>This is some text</p>
</section>
<section  class="floatleft">
<img src="images/rome-05-sml.jpg" width="350" height="263" alt=""/>
<p>This is some text</p>
</section>
</div>
</body>
</html>