Compartilhar via

Expand Accordion Panes On Mouse Over Header

  • Artigo

This is a common requirement I see  among users of the accordion ,

How do I Open Accordion Panes OnMouseOver of  the header and Not on header Click ?

The answer is pretty simple .

Lets walk through this :

a) Setup your Accordion

  <ajaxToolkit:Accordion ID="Accordion1" runat="server" ContentCssClass="grey" 
            FadeTransitions="false"  FramesPerSecond="25" TransitionDuration="250"  

             HeaderCssClass="dimgreen" EnableViewState="true">
            <Panes>
               ::::
            </Panes>
</ajaxToolkit:Accordion>

 b) Each of the accordion header Pane will have a <SPAN> tag setup for the header.

     On MouseOver of the Span Tag , we will open the Accordion Pane .

  

 <ajaxToolkit:AccordionPane runat="server" ID="PaneOne">
          <Header>
               <span onmouseover="Openpane('0',event)">Accordion</span>
           </Header>
           <Content>
               <br />
               <br />
               Expand Accordion Panes on Mouse Over :: Pane 1
               <br />
               <br />
           </Content>
</ajaxToolkit:AccordionPane>

The Span's onmouseover event is handled by the Openpane Function.

c) The javaScript Function Openpane .

 <script language="javascript" type="text/javascript"> 

function Openpane(paneIndex,eventElement) { 
    var behavior = $get("Accordion1").AccordionBehavior; 
    behavior.set_SelectedIndex(paneIndex); 
}

</script>

Download Complete Example :

Comments

  • Anonymous
    September 10, 2007
    PingBack from http://msdnrss.thecoderblogs.com/2007/09/10/expand-accordion-panes-on-mouse-over-header/

  • Anonymous
    November 07, 2007
    Doesnt seem to work when used in web user controls, any idea how to get it working?

  • Anonymous
    February 12, 2008
    <script language="javascript" type="text/javascript">                                            function Openpane(paneIndex,eventElement) {                                           var behavior = $get("<% =Me.Accordion1.ClientId %>").AccordionBehavior;                                            behavior.set_SelectedIndex(paneIndex);                                            }                                        </script> THis should do it if you can accept an inline rendering of the clientid

  • Anonymous
    February 19, 2008
    Great stuff by the way to use with a web user control add another input param to the javascript method and pass in <%= Accordion1.ClientID %> then use this param as in the $get Hope this helps

  • Anonymous
    March 07, 2008
    This works for the whole width of the accordion header, if you use the <div></div> tags instead of span. Otherwise it just works over the text of the header.

  • Anonymous
    July 10, 2008
    Great, this saved me some time. Thanks -b