Question

I am given a developing CMS site in wordpress.I am learning now html,css,php,jquery,ajax and ofcourse doing research on wordpress..

so my site should some what look like this

now in this the

There is only one page that is displayed …main page

and i have 3 pages(about,home,people) created in wordpress (WordPress—>Pages—->new page—>write content)

1)In main page as shown in image i want 3 panels (About,Home,People) all of which are collapsed when main page page is opened

2)but once clicked on Home it should expand the home panel and display the page contents there itself without reloading the page.And other panels should collapse at the same time.

3)When Clicked on menu bar item (About or any other) The Panel with same name should expand..

If there are any sites that people know that will somehow answer my queries, please pass them on.

EDIT1

I downloaded the jquery examples from site http://jqueryui.com/download

i want the tabs as in collapsible.html example

now the below code is the page.php

      <?php wp_enqueue_script("jquery"); // added this line  16-7-2012
?>

    <script type="text/javascript" src="<?php bloginfo('template_directory');          ?>/js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.ui.core.js"></script>
   <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.ui.widget.js"></script>
  <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/query.ui.accordion.js"></script>

   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>/js/demos.css" type="text/css" media="screen" />
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url');  ?>/js/jquery.ui.all.css" type="text/css" media="screen" />



<script>
$(function() {
    $( "#accordion" ).accordion({
        collapsible: true
    });
});
</script>


   <?php get_header(); ?>

<div class="content">

<?php if (have_posts()) : ?>

    <?php $page_id=1332;?>
<?php get_page( $page_id ) ?> 

    <?php while (have_posts()) : the_post(); ?>

        <h1><?php the_title(); ?></h1>

        <?php the_content('Read more'); ?>



    <?php endwhile; ?>
</div>

<?php else : ?>

    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something that isn't here.</p>
    <?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>

 <?php if (is_single()) comments_template(); ?>

</div>

 <?php get_sidebar(); ?>

<?php get_footer(); ?>

as it loads all the pages..
In WP pages(content section) i have written the html code given in jquery examples i.e the below code:

  <div id="accordion">
  <h3><a href="#">Section 1</a></h3>
   <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
  <h3><a href="#">Section 2</a></h3>
  <div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
</div>
  <h3><a href="#">Section 3</a></h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
    <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
    </ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>

but its displayed as plain textt with no accordion tabs

EDIT2

    function{
  $(function() {
      $( "#accordion" ).accordion({
        collapsible: true
      });
  })};

EDIT3

   jQuery(document).ready(function(){   
  $(function() {
    $( "#accordion" ).accordion({
        collapsible: true
    });
});

Answer 1

As for the collapsible part, you could use the jquery ui accordion.:
http://jqueryui.com/demos/accordion/

The simplest way would be to do it w/o ajax and just render all your pages in the main page.
see http://codex.wordpress.org/Function_Reference/get_page and wordpress: How can I display multiple pages on one page?

There for you’ll just need to modify the index.php file in your theme.

—

You could also load the pages content via ajax as described here:
jQuery Accordion and loading content through AJAX

For that you’ll also need to modify the page.php template to show just the content, with no header / footer.