Expand Accordion Panes On Mouse Over Header

Artikkeli
09/10/2007

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

Jaa

Expand Accordion Panes On Mouse Over Header

Comments

Lisäresursseja