Hi All- I am trying to play around with the ajax toolkit accordion...
i referenced this simple demo but it does not work... i get a slew of errors...
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="accordion.aspx.cs" Inherits="dragonfly.Web_Forms.accordion" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.accordion {
width: 400px;
}
.accordionHeader {
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionHeaderSelected {
border: 1px solid #2F4F4F;
color: white;
background-color: #5078B3;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent {
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Accordion ID="Accordion1"
CssClass="accordion"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
runat="server">
<Panes>
<asp:AccordionPane runat="server">
<Header>Home</Header>
<Content>Emoh Emoh Emoh Emoh</Content>
</asp:AccordionPane>
<asp:AccordionPane runat="server">
<Header>Services</Header>
<Content>Secivres Secivres Secivres Secivres</Content>
</asp:AccordionPane>
<asp:AccordionPane runat="server">
<Header>Contact</Header>
<Content>Tcatnoc Tcatnoc Tcatnoc Tcatnoc</Content>
</asp:AccordionPane>
</Panes>
<asp:AccordionExtender runat="server" Enabled="True"
TargetControlID="Accordion1" ID="Accordion1_AccordionExtender"
ContentCssClass="accordionContent" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"></asp:AccordionExtender>
<asp:AccordionPane runat="server" HeaderCssClass="" ContentCssClass=""><Header>
Home
</Header>
<Content>
Emoh Emoh Emoh Emoh
</Content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" HeaderCssClass="" ContentCssClass=""><Header>
Services
</Header>
<Content>
Secivres Secivres Secivres Secivres
</Content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" HeaderCssClass="" ContentCssClass=""><Header>
Contact
</Header>
<Content>
Tcatnoc Tcatnoc Tcatnoc Tcatnoc
</Content>
</asp:AccordionPane>
</asp:Accordion>
</div>
</form>
</body>
</html>
Also my end goal is to create a menu bar that when you are not hovering three menu bars (A,B,C) are all 100px wide... when you hover over one of them (let's say A) it will expand to 200px and the others will shrink to 50px... remove hover and they all go back to 100px... I want them to animate like an accordion... This is I assume a modification of an accordion menu?
Before you post, read our: 
