Wordpress subpages

Question

I have been asked to design a site in Wordpress .Just a rough design looks like given below :

so what i want is when i click on ABOUT it should expand and display the page content.Somewhat like this :

Any one has any idea regarding displaying the page content at same place instead opening in new page or window ?

Thanks in advance.. :)

Edit1

the below is the php code of page.php

 <?php get_header(); ?>
 <div id="content" class="page">

 <div id="box">
  <h3><?php the_title(); ?></h3>

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
        <?php the_content(); ?><br /><div style="clear:both;"></div>
    </div>
<?php endwhile; ?>
<?php endif; ?>   

i want menus to be displayed as shown in the images .So as per the tutorial of Arconix Shortcode Collection it says i have to write the code as for example

  [accordions]
  [accordion title="About"]
  About Content here
  [/accordion]
  [accordion title="Results"]
  Results Content here
  [/accordion]
  [accordion title="People" last="last"]
  People Content here
  [/accordion]
  [/accordions]

Now in this instead of just the content watever we write i wanted it to be

1)content from a page for example in case of about its the content from page About(as pages can be created in wordpress Pages--->new page .So in case if i want to edit this i just go to pages and edit the about page).

2)and the content should get displayed only after mouse click..

edit 2

In the pages wherever I want to include accordion i select the given option from the pages

once i click on it .There is no option to select a page as shown below:

so anyone has any idea regarding this..?

Answer 1

There is a WordPress plugin that can accomplish this easily - http://wordpress.org/extend/plugins/arconix-shortcodes/

Documentation for Accordions with this plugin at https://arconixpc.fogbugz.com/default.asp?W4

(The plugin does much more as well.)