Forcing an Accordion header to a specific style

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » Forcing an Accordion header to a specific style

Previous Next

Forcing an Accordion header to a specific style

Rate It (1)

Last post 10-29-2007 10:19 AM by joseph.martine@insightbb.com. 6 replies.

Sort Posts:

Forcing an Accordion header to a specific style

07-25-2007, 8:37 AM

Contact

Loading...
KarlR
Joined on 02-02-2007, 3:07 PM
Sarasota, FL, USA
Posts 139

I have an Accordion control with 10 panes and it uses CSS classes to determine what the headers look like:

<cc1:Accordion ID="Accordion1" runat="server" 
HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
SelectedIndex="0" FadeTransitions="True" FramesPerSecond="40" TransitionDuration="250" AutoSize=None Visible=false>
<Panes>
    <cc1:AccordionPane ID="AccordionPane0" runat="server">
        <Header>
            <uc2:RecHeader id="RecHeader0" runat="server"></uc2:RecHeader>
        </Header>
        <Content>
                <uc1:RecDetail ID="RecDetail0" runat="server" />
        </Content>
    </cc1:AccordionPane>

/* Accordion */
.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
	font-family: Arial, Sans-Serif;
	font-size: 20px;
	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: 20px;
	font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

This works - as I select an Accordion control header, the selected pane switches to the "accordionHeaderSelected" style (and the other panes all switch to "accordionHeader"). However, I have a wierd situation where I end up with more than one pane using the "Selected" style (even though only one pane can be selected at a time). This is because of some editing I am doing using a user control within the panes of the Accordion.

Is there a way to programatically (VB, preferably) "force" panes to use a specific CSS style? I know which of the panes is currently selected and I want the remaining 9 to use the usual "accordionHeader" style.

I would appreciate any suggestions/comments.

Thank you!

Filed under: Accordion, css

Re: Forcing an Accordion header to a specific style

07-25-2007, 9:07 AM

Contact

Loading...
CalZ
Joined on 07-19-2007, 12:59 AM
Posts 10

I have this bug as well, although I don't really have any strange usercontrols to cause it. Just a simple databound accordion with some buttons in there.

Re: Forcing an Accordion header to a specific style

07-30-2007, 2:43 AM

Contact

Answer

Loading...
Raymond Wen - MSFT
Joined on 12-22-2006, 3:29 AM
China
Posts 3,764

Hi,

You may "force" a pane to use a css style via javascript, here is the code snippet you may refer to:

function onSelectedIndexChanged(sender, args)
    {
        var behavior = $find('MyAccordion_AccordionExtender'); // find the accordion component on client side
        var pane = behavior.get_Pane();    // find a pane
        var header = pane.header; // get the header of the pane
        pane.header.className = "accordionHeaderSelected1"; // set the header's style to whatever
    }

Hope this helps.

Re: Forcing an Accordion header to a specific style

07-31-2007, 4:22 PM

Contact

Loading...
KarlR
Joined on 02-02-2007, 3:07 PM
Sarasota, FL, USA
Posts 139

Thanks for the reply. I understand what you are trying to do, but I am having a hard time "wiring it up".

How do I set the accordion to trigger this event when a pane is selected? I could not find a "behavior" attribute for the accordion that could be assigned to what you showed. Ideally, what I want to do is set every pane except the currently selected one to the CSS for the "unselected" style. To clarify: my accordion control always has 10 panes. If I can determine that pane "4" is currently selected, I want panes 1-3 & 5-10 to be set to this style.

Could you please help me out a little more? My JS is lacking Sad & I would appreciate it.

Thank you!

Re: Forcing an Accordion header to a specific style

07-31-2007, 11:12 PM

Contact

Loading...
Raymond Wen - MSFT
Joined on 12-22-2006, 3:29 AM
China
Posts 3,764

Here is a full sample:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    .myclass
    {
        background-color : Blue;
    }
    
    .accordionHeader1
    {
        border: 1px solid #2F4F4F;
        color: white;
        background-color: #2E4d7B;
	    font-family: Arial, Sans-Serif;
	    font-size: 20px;
	    font-weight: bold;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
    }

    .accordionHeaderSelected1
    {
        border: 1px solid #2F4F4F;
        color: white;
        background-color: #5078B3;
	    font-family: Arial, Sans-Serif;
	    font-size: 20px;
	    font-weight: bold;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
    }

    </style>
    
    <script type="text/javascript">
    function doSomething(e)
{
// this script is used to prevent the click on the header causing expanding / collpasing
	if (!e) var e = window.event;
	e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();
}
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
    <ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
            HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" SuppressHeaderPostbacks="true"
            FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250"
            AutoSize="None" RequireOpenedPane="false" ><Panes>
            <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server" HeaderCssClass="myclass">
                <Header>
<a href="">1. Accordion</a><asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton>
</Header>
                <Content>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" />
                    The Accordion is a web control that allows you to provide multiple panes and display them one at a time.
                    It is like having several where only one can be expanded at a time.  The Accordion is implemented as a web control that contains
                    AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content.
                    We keep track of the selected pane so it stays visible across postbacks.
                
</Content>
            </ajaxToolkit:AccordionPane>
            <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="" HeaderCssClass="">
                <Header>
<a href="">2. AutoSize</a>
</Header>
                <Content>
                    <p>It also supports three AutoSize modes so it can fit in a variety of layouts.</p>
                    <ul>
                        <li><b>None</b> - The Accordion grows/shrinks without restriction.  This can cause other elements
                            on your page to move up and down with it.</li>
                        <li><b>Limit</b> - The Accordion never grows larger than the value specified by its Height
                            property.  This will cause the content to scroll if it is too large to be displayed.</li>
                        <li><b>Fill</b> - The Accordion always stays the exact same size as its Height property.  This
                            will cause the content to be expanded or shrunk if it isn't the right size.</li>
                    </ul>
                    <asp:Button ID="Button2" runat="server" Text="Button" />
                
</Content>
            </ajaxToolkit:AccordionPane>
            <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server" ContentCssClass="" HeaderCssClass="">
                <Header>
<a href="">3. Control or Extender</a>
</Header>
                <Content>
                    The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit.
                    The extender expects its input in a very specific hierarchy of container elements (like divs), so
                    the Accordion and AccordionPane web controls are used to generate the expected input for the extender.
                    The extender can also be used on its own if you provide it appropriate input.
                
</Content>
            </ajaxToolkit:AccordionPane>
            
            
             <ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server" ContentCssClass="" HeaderCssClass="">
                <Header>
<a href="">3. A GridView in this Pane</a>
</Header>
                <Content>
                
        
</Content>
            </ajaxToolkit:AccordionPane>
            
            
            </Panes>
        </ajaxToolkit:Accordion>
        
        <hr />
    
    </div>
    <script type="text/javascript">
    function pageLoad(sender, args)
    {
        var behavior = $find('MyAccordion_AccordionExtender');
        behavior.add_selectedIndexChanged(onSelectedIndexChanged);
    }
    
    function onSelectedIndexChanged(sender, args)
    {
        var behavior = $find('MyAccordion_AccordionExtender');
        var pane = behavior.get_Pane(1);
        var header = pane.header;
        pane.header.className = "accordionHeaderSelected1";
    }
    </script>
    </form>
</body>
</html>

Re: Forcing an Accordion header to a specific style

08-01-2007, 9:11 AM

Contact

Loading...
KarlR
Joined on 02-02-2007, 3:07 PM
Sarasota, FL, USA
Posts 139

OK, now we are getting somewhere. Using your code, Pane1 ALWAYS uses the style for the "not selected" header - even when it is selected.

Again, my JS is lacking, so I am unsure how to complete this code for my use. I need to be able to determine the currently selected item and "force" the other 9 to the "not selected" style.

I realize that this could be done in JS, but is there a way to do this in VB? I tried to access the "onSelectedIndexChanged" event, but I could not create this function in VB correctly. I would appreciate any help you could give me, but if it was in VB I could probably start messing with this myself.

Again, thank you for your continued help & examples!