Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,739
    Thanks
    41
    Thanked 191 Times in 190 Posts

    AJAX toolkit Accordion cntrl

    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?

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    wrong forum, ask in a .NET or at least a server-side forum...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,739
    Thanks
    41
    Thanked 191 Times in 190 Posts
    It's an ajax client side hack... isnt it?
    Moderator can you review and move if applicable please.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •