Expanding and Collapsing Sections

[Expand Entire Page... ] [Collapse Entire Page... ]

Learn how to create expanding and collapsing sections to automatically show and hide the contents of various sections of your ECEn web page.

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 lists in the ECEn Web XML, we're going to use <section> tags.

These instructions assume that you already have a ECEn XML web page to edit and know at least a bit about XML. Most content, such as text, links, lists, pictures etc., belong in the <content> portion of your page, so 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 brief overview on 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 by clicking the 'this XML' at the bottom of the page. Or, the XML source located in the Common Tasks Downloads to the right. (Right click, Save Link Target As...)

Basic Expanding and Collapsing Sections

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

<section>

<style>sub-sections collapsed</style>

<section>

<title>

<text>Section 1</text>

</title>

<text>More information about section 1.</text>

</section>

<section>

<title>

<text>Section 2</text>

</title>

<text>More information about section 2.</text>

</section>

Here is what these sections might look like on a live ECEn XML web page:

Section 1...

Section 2...

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:

1	Create opening and closing `<section>` tag.

Within the <section> create an opening and closing <style> tag. Within the <style> tag, specify 'sub-sections collapsed'.
Most of the other section styles still apply when you are using expanding and collapsing sections. For a list of all possible styles, check out the ECEn XML Template Reference.

Create a <section> tag and give it a title. Create a <title> tag and within it a <text> tag and finally within the <text> tags, specify the title of your section.
Although expanding and collapsing sections will still work with title-less sections, we don't recommend it. It can be difficult for users to guess what is within the section they are expanding.

4	After your section's title, create all the content you would like in your section. Any content that can normally go in a section can go in an expanding and collapsing section.

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.

[Expand Entire Page... ] [Collapse Entire Page... ]