?
Solved

AJAX Accordion

Posted on 2011-10-12
2
Medium Priority
?
280 Views
Last Modified: 2012-08-13
Hello Experts,

I have the following HTML markup below that is using the ASP.NET AJAX Accordion Control. It works fine, except that I would like to make the formatting of it nicer. Perhaps I'm using the wrong Tool.

I would like to have the "apWorkLocation" and "apHomeLocation" AccordionPane to sit beside each other rather than stacked on top like they are now. I would also like to know if I could make those two AccordionPanes look like two RadioButton options that when clicked it will then display the contents of that AccordionPane.


<h1>NEW USER ACCOUNT</h1>
                <p>Employees must complete this form in order to schedule classes to take.</p>
                <asp:Label ID="lblName" runat="server" CssClass="CourseDescTitle" Text="Name"></asp:Label>
                <br />
                <asp:TextBox ID="txtName" Width="300" CssClass="txtCourseInsert" runat="server"></asp:TextBox>
                <br />
                <br />
                <asp:Label ID="lblEntity" runat="server" CssClass="CourseDescTitle" Text="Employer"></asp:Label>
                <br />
                <asp:DropDownList ID="ddlEntity" CssClass="ddlCourseInsert" Width="307" runat="server"></asp:DropDownList>
                <br />
                <br />
                <asp:Label ID="lblContactMethod" runat="server" CssClass="CourseDescTitle" Text="Contact Method"></asp:Label>
                <br />
                <asp:Accordion ID="aContactMethod" SelectedIndex="0" AutoSize="None" runat="server">
                    <Panes>
                        <asp:AccordionPane ID="apWorkLocation" runat="server">
                        <Header>Work Address</Header>
                            <Content>
                                <br />
                                <asp:Label ID="lblBuildingLocation" runat="server" CssClass="CourseDescTitle" Text="Building Location"></asp:Label>
                                <br />
                                <asp:DropDownList ID="ddlBuildingLocation" CssClass="ddlCourseInsert" Width="307" runat="server"></asp:DropDownList>
                                <br />
                                <br />
                                <asp:Label ID="lblPhoneExtension" runat="server" CssClass="CourseDescTitle" Text="Phone Extension"></asp:Label>
                                <br />
                                <asp:TextBox ID="txtPhoneExtension" CssClass="txtCourseInsert" Width="300" runat="server"></asp:TextBox>
                                <br />
                                <br />
                            </Content>
                        </asp:AccordionPane>
                    </Panes>
                    <Panes>
                        <asp:AccordionPane ID="apHomeLocation" runat="server">
                        <Header>Home Address</Header>
                            <Content>
                                <br />
                                <asp:Label ID="lblStreetAddress" runat="server" CssClass="CourseDescTitle" Text="Street Address"></asp:Label>
                                <br />
                                <asp:TextBox ID="txtStreetAddress" CssClass="txtCourseInsert" Width="300" runat="server"></asp:TextBox>
                                <br />
                                <br />
                                <asp:Label ID="lblCity" runat="server" CssClass="CourseDescTitle" Text="City"></asp:Label>
                                <br />
                                <asp:TextBox ID="txtCity" Width="300" CssClass="txtCourseInsert" runat="server"></asp:TextBox>
                                <br />
                                <br />
                                <asp:Label ID="lblState" runat="server" CssClass="CourseDescTitle" Text="State"></asp:Label>
                                <br />
                                <asp:DropDownList ID="ddlState" CssClass="ddlCourseInsert" Width="307" runat="server"></asp:DropDownList>
                                <br />
                                <br />
                                <asp:Label ID="lblPhone" runat="server" CssClass="CourseDescTitle" Text="Phone"></asp:Label>
                                <br />
                                <asp:TextBox ID="txtPhone" CssClass="txtCourseInsert" Width="300" runat="server"></asp:TextBox>
                                <br />
                                <br />
                           </Content>
                        </asp:AccordionPane>
                    </Panes>
                </asp:Accordion>
                <br />
                <br />
                <asp:Label ID="lblEmailAddress" runat="server" CssClass="CourseDescTitle" Text="Email Address"></asp:Label>
                <br />
                <asp:TextBox ID="txtEmailAddress" CssClass="txtCourseInsert" Width="300" runat="server"></asp:TextBox>
                <br />
                <br />
                <asp:Label ID="lblConfirmEmail" runat="server" CssClass="CourseDescTitle" Text="Confirm Email Address"></asp:Label>
                <br />
                <asp:TextBox ID="txtConfirmEmail" CssClass="txtCourseInsert" Width="300" runat="server"></asp:TextBox>
                <br />
                <br />
                <asp:Label ID="lblUsername" runat="server" CssClass="CourseDescTitle" Text="Username"></asp:Label>
                <br />
                <asp:TextBox ID="txtUserName" CssClass="txtCourseInsert" Width="300" runat="server"></asp:TextBox>
                <br />
                <br />
                <asp:Label ID="lblPassword" runat="server" CssClass="CourseDescTitle" Text="Password"></asp:Label>
                <br />
                <asp:TextBox ID="txtPassword" CssClass="txtCourseInsert" Width="300" runat="server"></asp:TextBox>

Open in new window

0
Comment
Question by:asp_net2
2 Comments
 
LVL 28

Accepted Solution

by:
strickdd earned 2000 total points
ID: 36958437
Those options are built into the accordion object. you would have to write your own custom control that would behave that way. It would take quite a bit of CSS and javascript, but can be done if that is what you need.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36958510
Is there another way to do that using other ASP.NET controls?
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question