How to programmatically expand/collapse AJAX accordion panes [Resolved]

Posted by Bhupentiwari under ASP.NET AJAX on 1/11/2016 | Points: 10 | Views : 8183 | Status : [Member] | Replies : 4
How to programmatically expand/collapse AJAX accordion panes from code behind

Thanks n Regards
Bhupendra Tiwari



Responses

Posted by: Rajnilari2015 on: 1/11/2016 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 50

Up
0
Down

Resolved
@Bhupentiwari Sir, use the Collapsed property for doing so. If set to true indicates Collapsed else Expand e.g.

// Collapse
this.CollapsiblePanelExtender1.Collapsed = true;

// Expand
this.CollapsiblePanelExtender1.Collapsed = false;


We can also apply the trick of setting the ClientState property to true or false for Collapsed or Expand state respectively as

// Collapse 
this.CollapsiblePanelExtender1.ClientState = "true";

// Expand
this.CollapsiblePanelExtender1.ClientState = "false";


Hope this helps.

--
Thanks & Regards,
RNA Team

Bhupentiwari, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Bhupentiwari on: 1/11/2016 [Member] Starter | Points: 25

Up
1
Down
Thanks RNA Team.
I got the answer

 accordionSubscribers.RequireOpenedPane = true;


Thanks n Regards
Bhupendra Tiwari

Bhupentiwari, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Bhupentiwari on: 1/11/2016 [Member] Starter | Points: 25

Up
0
Down
<ajaxToolkit:Accordion ID="accordionSubscribers" SkinID="subscriptionAccordion" runat="Server"

SelectedIndex="1" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent" AutoSize="None" FadeTransitions="true" TransitionDuration="250"
FramesPerSecond="40" RequireOpenedPane="false" SuppressHeaderPostbacks="false"
Height="50px">
<Panes>
<ajaxToolkit:AccordionPane runat="server" ID="accPane1" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent">
<Header>
<asp:LinkButton SkinID="skinAccordionHeader" OnClientClick="return changeSelected('Subscribers');"
runat="server" OnClick="AccordionHeaderSubscribers_Click" ID="lbAccordionHeaderSubscribers"
Text="<%$ Resources:LocalizedPageControlsText, headerSelectSubscribers %>"></asp:LinkButton>
</Header>
<Content>
<div class="checkBoxSubscriber">
<asp:CheckBoxList ID="cblSubscribers" runat="server" ValidationGroup="vgSubscriptionParameter" CssClass="checkBoxSubscriber">
</asp:CheckBoxList>
<%-- <asp:CheckBoxList ID="cblSubscribers" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"
RepeatLayout="Table" ValidationGroup="vgSubscriptionParameter" CssClass="checkBoxSubscriber">
</asp:CheckBoxList>--%>
</div>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>


Not getting that option

Thanks n Regards
Bhupendra Tiwari

Bhupentiwari, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Rajeshatkiit on: 1/11/2016 [Member] Starter | Points: 25

Up
-1
Down
In order to programmatically expand a given Accordion Pane, use the set_SelectedIndex on the Accordion control. The sample shown below expands Pane 3 programmatically
<script type="text/javascript">
function pageLoad()
{
changeSelected(2); // expand pane 3
}

// expand given accordion pane
function changeSelected(idx)
{
$find('AccordionCtrl_AccordionExtender').set_SelectedIndex(idx);
}
</script>

Bhupentiwari, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response