hide and show div on click

I have the following php code:

PHP Code:

---

        $files = glob('martingallery/*');
        natcasesort($files);
        
        foreach($files as $file){
            echo '<a href="' . $file . '"><img src="' . $file . '" height="150px" width="auto"/></a>';
        } 


---

what I would like it to look like:

PHP Code:

---

        $files = glob('martingallery/*');
        natcasesort($files);
        
        foreach($files as $file){
            echo '<a onclick="SET THE $FILE DIV TO VISIBLE"><img src="' . $file . '" height="150px" width="auto"/></a>
<div id="' . $file . '" style="visible:noooooooooo;"><img src="' . $file . '" height="auto" width="auto"/></div>';
        } 


---

Here's an easy method with jQuery. Add this CSS and JS to your HTML:

Code:

---


  <style type="text/css">
    .show-hide div {display: none;}
    .show-hide.show div {display: block;}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $('.show-hide a').click(function(){
        var parentDiv =  $(this).parent();
        // if parents div already has class show, remove it otherwise, add it
        if ($(parentDiv).hasClass('show')) {
          $(parentDiv).removeClass('show');
      } else {
        $(parentDiv).addClass('show');
    }
      });
    });
  </script>

---

And modify your PHP to this:

Code:

---

    $files = glob('martingallery/*');
        natcasesort($files);
       
        foreach($files as $file){
            echo '<div class="show-hide"><a><img src="' . $file . '" height="150px" width="auto"/></a>
<div id="' . $file . '"><img src="' . $file . '" height="auto" width="auto"/></div></div>';
        }

---

thanks for the reply cbVision although I am needing this to use on a photo gallery, this code allows the user to click a image and show a larger image straight underneath or beside it i understand all i have to do is style it to solve this, however how would i go about closing the enlarged image when the user clicks it?

so the user clicks a thumb to open it up as a big image then they click the big image to close it so they can choose another to view =p well i will develop this so that they is a way to navigate the images once in the "enlarge" but i would still want a way to exit it? =s