Expanding and collapsing sections allow you to create sections which only show the title of the section by default. When a user clicks on the title of the section, the rest of the section's contents will appear beneath the section's title. When you use these sections, options will appear on the page allowing a user to expand or collapse all of sections at once.

To create expanding and collapsing sections in ECEn Web XML, we're going to use <section> tags.

These instructions assume that you already have an ECEn XML web page to edit and know at least a bit about XML. Most content, such as text, links, lists, pictures etc., belongs in the <content> portion of your page; check the instructions below to see if you need to make sure that you have a page with a <content> portion. If you need a quick tutorial or just a simple starter web page download, check out the 'Howdy, World' Tutorial where you can get a brief overview of what files you need to set up a basic ECEn XML web page.

If you need an example, have a look at the Expanding and Collapsing Section Example page. You can view the XML source in your browser by clicking the 'this XML' link at the bottom of the page. Or, the XML is source located in the Common Tasks Downloads to the right. (Right click, Save Link Target As...)

Here is some ECEn XML "code" to make two expanding and collapsing sections on the page:


Here is what these sections might look like on a live ECEn XML web page:
Just click on 'Section 1' and 'Section 2' to "expand" the section and view the rest of the content. When you're through reading, click on the titles again to "collapse" the section. You can also use the 'Expand Entire Page...' and 'Collapse Entire Page...' links at the top and the bottom of this page to expand or collapse 'Section 1' and 'Section 2' at once.

The title of the section might be styled differently depending on where your section is in respect to other sections in your content.

To create expanding and collapsing sections:

Some browsers do not correctly collapse sections once they have been expanded. The content of the section will still disappear, but the browser may leave a blank space where the content was. This happens occasionally when pictures are within the expanding and collapsing section's content.

What if I still don't get it... Have look at the Expanding and Collapsing Sections Example and if you're still stuck, send an email to the ECEn Web Team and we'll be happy to help you.