Accordion control sample

25/05/2011 18:29

<asp:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
            FadeTransitions="true" FramesPerSecond="50" TransitionDuration="150" AutoSize="None"
            RequireOpenedPane="false" SuppressHeaderPostbacks="true" Width="575px">
            <Panes>
                <asp:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>
                        Employee Details
                    </Header>
                    <Content>
                        <div align="center">
                            <table width="100%">
                                <tr>
                                    <td>
                                        Employee Code:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtEmpCode" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfvempcode" runat="server" ControlToValidate="txtEmpCode"
                                            ErrorMessage="*"></asp:RequiredFieldValidator>
                                    </td>
                                    <td>
                                        Date of Birth:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtDOB" runat="server"></asp:TextBox>
                                        <asp:RegularExpressionValidator ID="rfv2DOB" runat="server" ErrorMessage="*" ControlToValidate="txtDOB"
                                            ValidationExpression="^(((0?[1-9]|1[012])/(0?[1-9]|1\d|2[0-8])|(0?[13456789]|1[012])/(29|30)|(0?[13578]|1[02])/31)/(19|[2-9]\d)\d{2}|0?2/29/((19|[2-9]\d)(0[48]|[2468][048]|[13579][26])|(([2468][048]|[3579][26])00)))$"
                                            SetFocusOnError="True">
                                        </asp:RegularExpressionValidator>
                                        <asp:TextBoxWatermarkExtender ID="txtDOB_TextBoxWatermarkExtender" runat="server"
                                            Enabled="True" TargetControlID="txtDOB" WatermarkCssClass="WaterMark" WatermarkText="MM/dd/yyyy">
                                        </asp:TextBoxWatermarkExtender>
                                        <asp:MaskedEditExtender ID="txtDOB_MaskedEditExtender" runat="server" CultureAMPMPlaceholder=""
                                            CultureCurrencySymbolPlaceholder="" CultureDateFormat="" CultureDatePlaceholder=""
                                            CultureDecimalPlaceholder="" CultureThousandsPlaceholder="" CultureTimePlaceholder=""
                                            Enabled="True" Mask="99/99/9999" MaskType="Date" TargetControlID="txtDOB" AutoComplete="False">
                                        </asp:MaskedEditExtender>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        First Name:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                                    </td>
                                    <td>
                                        Last Name
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfvlname" runat="server" ControlToValidate="txtLastName"
                                            ErrorMessage="*"></asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4">
                                        <asp:Label ID="lblEmpID" runat="server" Visible="false"></asp:Label>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>
                        Login Details
                    </Header>
                    <Content>
                        <div align="center">
                            <table width="100%">
                                <tr>
                                    <td>
                                        Employee Login:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtEmpLogin" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfv" runat="server" ControlToValidate="txtEmpLogin"
                                            ErrorMessage="*"></asp:RequiredFieldValidator>
                                    </td>
                                    <td>
                                        Password:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfvpassword" runat="server" ControlToValidate="txtPassword"
                                            ErrorMessage="*"></asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Email ID:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtEmailID" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfvemailid" runat="server" ControlToValidate="txtEmailID"
                                            ErrorMessage="*"></asp:RequiredFieldValidator>
                                        <asp:RegularExpressionValidator ValidationExpression="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$"
                                            ID="rxpEmail" runat="server" ErrorMessage="*" Display="Static" ControlToValidate="txtEmailID">
                                        </asp:RegularExpressionValidator>
                                    </td>
                                    <td colspan="2">
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane3" runat="server">
                    <Header>
                        Department Details
                    </Header>
                    <Content>
                        <div align="center">
                            <table width="100%">
                                <tr>
                                    <td>
                                        Department:
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddlDepartment" runat="server" />
                                        <asp:RequiredFieldValidator ID="rfvdepartment" runat="server" ControlToValidate="ddlDepartment"
                                            ErrorMessage="*" InitialValue="--Select--"></asp:RequiredFieldValidator>
                                    </td>
                                    <td>
                                        Designation:
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddlDesignation" runat="server" />
                                        <asp:RequiredFieldValidator ID="rfvdesig" runat="server" ControlToValidate="ddlDesignation"
                                            ErrorMessage="*" InitialValue="--Select--"></asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Role:
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddlRoleID" runat="server">
                                        </asp:DropDownList>
                                        <asp:RequiredFieldValidator ID="rfvroleid" runat="server" ControlToValidate="ddlRoleID"
                                            ErrorMessage="*" InitialValue="--Select--"></asp:RequiredFieldValidator>
                                    </td>
                                    <td colspan="2">
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </Content>
                </asp:AccordionPane>
            </Panes>
        </asp:Accordion>