I think the term you should be searching for is "accordion". It is not actually umbraco specific since it is purely done in javascript.

This post has a list of accordion jquery plugins: http://www.catswhocode.com/blog/8-amazing-jquery-accordions

Take a look if one of them suits your needs.

Thank you so much for your help Chriztian,
however because of i'm new to umbraco, I was a bit confused even though you provided clear explanation :)

I followed your instruction, but it wasn't working. This is probably my fault.
please excuse my ignorance :)

I'll write what I've done.

1. created Document type named 'CEDAR School,' which is consisted of
   "subTitle" - (textstring), "teaser"- (textstring), "bodyText"- (rich text) and "URL"- (textstring)
   
   
2. created XSLT named 'program' that contains
   

   <xsl:template match="/">
           <!-- Render all Programme documents below this page -->
           <xsl:apply-templates select="$currentPage/Programme" />
   </xsl:template>
   
   <!-- Template for a single Programme document -->
   <xsl:template match="Programme">
           <div class="programme">
                   <h2><a href="#" rel="toggle"><xsl:value-of select="@nodeName" /></a></h2>
                   <h3><xsl:value-of select="subTitle" /></h3>
                   <div class="teaser">
                           <xsl:value-of select="teaser" disable-output-escaping="yes" />
                   </div>
                   <div class="body">
                           <xsl:value-of select="bodyText" disable-output-escaping="yes" />
                   </div>
           </div>
   </xsl:template>

3. I created a page called 'USA,' then put information of One content--
   ---name of the school, location, descriptions, and url (document type is CEDAR School)
   
   
4. In the 'CEDAR School' template, I placed the 'program' macro, and all the properties, such as "subTitle" , "teaser", "bodyText" and "URL" like this
   <asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
     
     <umbraco:Macro Alias="CEDARProgram" runat="server"></umbraco:Macro>
     <umbraco:Item field="subTitle" runat="server"></umbraco:Item>
   <umbraco:Item field="teaser" runat="server"></umbraco:Item>
   <umbraco:Item field="bodyText" runat="server"></umbraco:Item>
   <umbraco:Item field="URL" runat="server"></umbraco:Item>
     </asp:Content>
   
5. then I viewed the page, and it's not working...of course, I've done something terribly wrong...:'(
   I'm so sorry for the trouble, but could you please help me out here once again? :'( thank you...
   

Hi Shawn,

No worries - we'll get throught it :-)

If your Document Type is called "CEDAR School", you should change "Programme" in my snippet above to "CEDAR_School", i.e.:

<xsl:apply-templates select="$currentPage/CEDAR_School" />

and

<xsl:template match="CEDAR_School">

Also, I didn't explain very well that the "USA" page, should just be a "Textpage" or similar, under which you would create a number of "CEDAR School" documents:

[Content]
- Home (Homepage)
-- USA  (Textpage)
--- Prep For Prep (CEDAR School)
--- POSSE Foundation (CEDAR School)
etc.

/Chriztian

BTW: The Macro goes into the Textpage template, and you shouldn't need the <umbraco:Item> fields...

/Chriztian

Thank you very much Chriztian !
Now the page displays the information, however it doesn't perform dropdown (accordian) feature...
here's the link for its page.

http://umbraco.5am.co/usa.aspx

do i need to plug in any kinds of java script or jquery in order to make it work?

once again, i'm so sorry for the trouble... :'(
and thank you so much for help me !

Hi Shawn,

Yes - you'd need to include any JavaScript & CSS needed by the widget. 

/Chriztian

Thank you so much Chriztian !

It works like a charm now !

Have a great day :)

is working on a reply...