There is no direct way to Expand/Collapse all panes in Accordion Extender. Using following java script, Accordion can be Expand/Collapse all panes in one click.
<script type="text/javascript">
function
pageLoad()
{
collapseAll();
}
function
collapseAll()
{
var
behavior = $get("<%=UserAccordion.ClientID%>").AccordionBehavior;
for
(var i = 0; i < behavior._panes.length; i++)
{
behavior.get_Pane(i).content.style.display = 'none';
behavior.get_Pane(i).content.height = 0;
behavior.get_Pane(i).content.style.height = '0px';
}
behavior.set_SelectedIndex(-1);
}
function
expandall()
{
var
behavior = $get("<%=UserAccordion.ClientID%>").AccordionBehavior;
for
(var i = 0; i < behavior._panes.length; i++)
{
behavior.get_Pane(i).content.style.display
= 'block';
behavior.get_Pane(i).content.height =
behavior.get_Pane(i).content.scrollHeight;
behavior.get_Pane(i).content.style.height =
behavior.get_Pane(i).content.scrollHeight + 'px';
}
}
</script>
When I tried this code, the expandAll function expanded all my panes, but didn't display their contents (only whitespace where the content should be). So I tried changing 'block' to 'inline' in line 5 of expandAll, and that worked, it displayed all panes perfectly.
ReplyDeleteAs an update to my previous comment, since then I tried it across multiple browsers. I found that changing 'block' to 'inline' works in Chrome and IE, but fails in Firefox, which only displays whitespace where the content should be. I looked at the HTML code and found that somehow, "style='display: none;'" is being inserted on the accordion pane div. Any ideas why this would happen on Firefox and not Chrome or IE?
DeleteThis comment has been removed by the author.
ReplyDeleteTry this snippent;
ReplyDeletevar FIREFOX = /Firefox/i.test(navigator.userAgent);
for (var i = 0; i < behavior._panes.length; i++) {
if (FIREFOX) {
behavior.get_Pane(i).content.style.display = 'block';
behavior.get_Pane(i).content.style.opacity = "100";
}
else {
behavior.get_Pane(i).content.style.display = 'inline';
}
behavior.get_Pane(i).content.height =
behavior.get_Pane(i).content.scrollHeight;
behavior.get_Pane(i).content.style.height =
behavior.get_Pane(i).content.scrollHeight + 'px';
}
I tried the same and found working but in IE we need to double click the accordian content instead of single click .Help me pls
ReplyDelete