Q:

How can I click on one image and enlarge it and hide the remaining two images with jquery?

Here is my html:
<div class="Album1">
<ul>
    <li class="pic1"><a href=""><img src="#" alt=""></a></li>
    <li class="pic2"><a href=""><img src="#" alt=""></a></li>
    <li class="pic3"><a href=""><img src="#"alt=""></a></li>
</ul>
</div>

How can I make it where when I click on one of the images it enlarges that image and the other two images disappear and then when I click on the image again it goes back to regular size and the other two images appear?
My js:
$(".Album1").click(function(event) {
    event.preventDefault();
    var largeImage = $(this).attr("rel");
    console.log(largeImage);

    $(".Album1 a").children().removeClass("currentImage");

    $(largeImage).addClass("currentImage");
});

A:

you can bind event on li element; for example:

$('.Album1 li').click(function() {
          $(this).siblings('li').toggle();
          return false;
      })

