How would you rate this article?

Rating: 2 user(s) have rated this article Average rating: 5.0
Posted by: retro
Date: 03/01/2009
Category: Web Development
Views: this article has been read 1435 times

Recent Articles Get the RSS feed

Start selling online with Nochex merchant services
(26/06/2010)

Nochex merchant accounts provide you with everything you need to accept payments on your web site. With no monthly fees and support for a number of ecommerce solutions, including nopCommerce, it has never been easier to start selling online!

SCA Web site now live
(25/05/2010)

Check out our latest project for community interest company S.C.A.

Microsoft .NET 4.0 Hosting now available
(25/05/2010)

We are pleased to announce support for version 4.0 of the .NET Framework on all of our hosting plans.

Aerial Spares Web Site Now Live
(11/02/2010)

We have just completed development of a new web site for UK based Aerial Spares.

nopCommerce User Guide now available
(11/02/2010)

Today sees the release of the official nopCommerce user guide. It explains every part of the application in detail and includes a getting started guide so you can get up and running quickly.

read more read more

Selecting an ACT Accordion pane with JavaScript
There may be cases where you do not want to define a header for your ACT (Ajax Control Toolkit) Accordion panes. A common example of this, is if you wish to use the Accordion to show specific content based on a selection made elsewhere on your site. This article demonstrates how to change the Accordion control's selected index using JavaScript.

One solution would be to put the entire control inside an asp updatepanel and then change the Accordion's selected index using server side code e.g.:

MyAccordion.SelectedIndex = 1

This would certainly give you a smooth looking UI, but this is a lot of overhead for doing something so simple. An easier way is to change the index using JavaScript code on the client.

Create a new aspx page and add the following markup:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Accordion.aspx.vb" Inherits="Accordion" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ACT Accordion Sample</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div id="about-browser-menu">
        <ul>
            <li><a id="lnk1" title="Link1" onclick="AccordionClick(0)">Link 1</a></li>
            <li><a id="lnk2" title="Link2" onclick="AccordionClick(1)">Link 2</a></li>
        </ul>
    </div>
    <div id="about-browser-item">
        <div class="browser-item">
            <ajax:Accordion ID="MyAccordion" runat="server" FadeTransitions="false" FramesPerSecond="40"
                TransitionDuration="500" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true"
                SelectedIndex="0">
                <Panes>
                    <ajax:AccordionPane ID="apnlWho" runat="server">
                        <Content>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet dolor sit
                                amet felis pellentesque varius. Phasellus iaculis bibendum risus. Aenean tortor.
                                Donec malesuada. Donec nec est. Praesent posuere, est quis facilisis hendrerit,
                                lacus nulla fringilla nunc, ut sollicitudin sem augue nec magna. Nullam pulvinar
                                sapien iaculis lacus. Praesent consectetur elementum arcu.
                            </p>
                        </Content>
                    </ajax:AccordionPane>
                    <ajax:AccordionPane ID="apnlWhat" runat="server">
                        <Content>
                            <p>
                                Mauris gravida diam ac turpis. Pellentesque habitant morbi tristique senectus et
                                netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus
                                orci luctus et ultrices posuere cubilia Curae;
                            </p>
                        </Content>
                    </ajax:AccordionPane>
                </Panes>
            </ajax:Accordion>
        </div>
    </div>
    </form>
</body>
</html>

Next add the following to your page's load event:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Dim _js As String = String.Format("function AccordionClick(_index) " & _
                                              "{{$find('{0}_AccordionExtender').set_SelectedIndex(_index);}}", _
                                              MyAccordion.ClientID)
            Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "AccordionClick", _js, True)
        End If
    End Sub

Launch the page in your browser and you should find that clicking either link displays the relevant accordion pane.

Send to Friend  Send to friend

Comments

Comment this article
Name:
E-mail:
Comment:
Add Cancel