使用JavaScript关闭Ajax手风琴

Question

I have an ajax accordion on that I want to close after 5 seconds from the page loading. I'm trying to do this with javascript but having no luck. I'm trying to change the accordion control of SelectedIndex to a value that will collapse the accordion. SelectedIndex = 0 is open (default), and I'm trying to change it to 1 after the javascript timer runs out.

$(document).ready(function () {
// close the accordion after 5 seconds
setTimeout(function () { document.getElementById('MainContent_Accordion1').SelectedIndex = 1; }, 5000); });

I'm not getting any errors on the java from the console, but the accordion isn't closing. Any thoughts?

Answer 1

I finally found something that works.

setTimeout(function () {
            var behavior = $get("<%Accordion1.ClientID%>").AccordionBehavior;
            behavior.set_SelectedIndex(1);}, 5000);

This solution does what I wanted, in that it behaves just as if the user clicked the accordion button. The other solutions I found basically would do an instantaneous hide and not animate the collapse of the accordion. By setting the index to a value higher than the maximum number, it in effect collapses the accordion. In my case I only have one pane, so setting the index from 0 to 1 will do the trick.

Answer 2

First of all Accordion panel's SelectedIndex property doesn't state that the Accordion panel is open or close. It indicates which pane out of many is currently displayed. So, it could be 0, 1, 2 ... n (where n indicates number of panes - 1).

The definition for the SelectedIndex property from Ajax Control Toolkit website is as follows

SelectedIndex - The AccordionPane to be initially visible

And, this value is stored in a hidden field with the name containing " _AccordionExtender_ClientState ".

TIP

Ok, back to solving your issue. First of all you need to think in HTML rather than server side properties of the Accordion control because you are going to manipulate it in client side using JavaScript . Accordion control is translated to a bunch of DIV elements in client side with CSS class names like accordionHeader and accordionHeaderSelected (this could vary depending on whether you've assigned custom classes during design time). See these images and focus on the highlighted areas.

When the pane is expanded

When a pane is expanded it's DIV contains class = "accordionHeaderSelected" . And, the hidden filed's value is the index of the pane selected (in this case first pane, ie 0). Also note the style property of the selected pane's content DIV.

When the pane is collapsed

When a pane is collapsed it's DIV contains class = "accordionHeader" . And, the hidden filed's value is always -1. Also note the style property of the selected pane's content DIV.

Therefore, in your JavaScript make use of these values to identify the currently expanded DIV. Then do follow these steps.

1. change the element class to class = "accordionHeader"

2. Find the content DIV related to the selected pane and close it by setting following style of the content DIV.

   style = 'height: 0px; overflow: hidden; display: none; opacity: 0;'

3. You should also make the hidden field value = -1

Hope this make sense to you. Let me know if you need further explanation.