Step 2 of 3: Adding Content to the C1Expander Control

Adding content to the C1Expander control is as simple as clicking in the body of the control and typing text or adding controls. The following steps assume you've completed Step 1 of 3: Adding C1Expander to the Page topic and added eight C1Expander controls to the page.

Complete the following steps to change the content of each C1Expander control's header and body:

In Design view click in the top-left C1Expander control's header and type in "Top".

Switch to Source view. Notice that the control's markup has changed. Header and Content tags have been added and the markup appears similar to the following:

<cc1:C1Expander ID="C1Expander1" runat="server">
            <Header>Top</Header>
            <Content></Content>
        </cc1:C1Expander>

Edit the Content tag so that it appears similar to the following:

<Content>Box1</Content>

This will add text to the body of the C1Expander control.

Edit the markup of each of the C1Expander controls to add Header and Content text so that your markup appears like the following:

<div>
    <div id="row1" style="width: 550px; float:none; clear:both;">
    <div id="box1" style="float:left;">
        <cc1:C1Expander ID="C1Expander1" runat="server">
            <Header>Top</Header>
            <Content>Box1</Content>
        </cc1:C1Expander>
    </div>
    <div id="box2" style="float:left;">
        <cc1:C1Expander ID="C1Expander2" runat="server">
            <Header>Top</Header>
            <Content>Box2</Content>
        </cc1:C1Expander>
    </div>
    <div id="box3" style="float:left;">
        <cc1:C1Expander ID="C1Expander3" runat="server">
            <Header>Bottom</Header>
            <Content>Box3</Content>
        </cc1:C1Expander>
    </div>
    <div id="box4" style="float:left;">
        <cc1:C1Expander ID="C1Expander4" runat="server">
            <Header>Bottom</Header>
            <Content>Box4</Content>
        </cc1:C1Expander>
    </div>
</div>
<div id="row2" style="width: 550px; float:none; clear:both;">
    <div id="box5" style="float:left;">
        <cc1:C1Expander ID="C1Expander5" runat="server">
            <Header>Left</Header>
            <Content>Box5</Content>
        </cc1:C1Expander>
    </div>
    <div id="box6" style="float:left;">
        <cc1:C1Expander ID="C1Expander6" runat="server">
            <Header>Right</Header>
            <Content>Box6</Content>
        </cc1:C1Expander>
    </div>
</div>

Run your application, and observe that the page now looks similar to the following image:

In this step you added content to C1Expander controls. In the next step you'll customize the appearance and behavior of the controls.