Jquery slider with multiple divs

I'm trying to create a site in which I have multiple images (links) in one div (#page2) and when one is clicked it closes the div that is already open (#page1) and opens content related to the image (link) that was clicked. When another image (link) is clicked it should close the open content in #pag开发者_如何学编程e1 and open the relevant content. I'm sure this is possible but I don't know how to do it.

HTML:

<div class="links">
  <a href="#page1"><img src=""/></a>
  <a href="#page2"><img src=""/></a>
  <a href="#page3"><img src=""/></a>
</div>
<div class="pages">
  <div id="page1"></div>
  <div id="page2"></div>
  <div id="page3"></div>
</div>

JQuery code:

$(document).ready(function() {
  $('div.pages div').hide();
  $('div.links a').click(function() {
    $('div.pages div').slideUp();
    $($(this).attr('href')).slideDown();
    return false;
  });
});

You can replace .slideUp() with .fadeOut() or .hide(). .slideDown() can be replaced with .fadeIn() or .show()

Perhaps what you are looking for is TABS or ACCORDION?

http://jqueryui.com/demos/tabs/

http://jqueryui.com/demos/accordion/