Set Index of AccordionPane using Javascript

In this article, I will explain how to set index of Accordion pane using javascript.

Step 1: Create an Accordion control with three panes

<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>Accordion Set Index Demo1</Header>
<Content>First Accordion Pane</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>Accordion Set Index Demo2</Header>
<Content>Second Accordion Pane</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
<Header>Accordion Set Index Demo3</Header>
<Content>Third Accordion Pane</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

Step 2: Create three buttons to set index of each accordion pane. Each button will call SetIndex javascript method.

<asp:Button ID="btnTest" OnClientClick="return SetIndex(0)" runat="server" Text="Set Index1" />
<asp:Button ID="btnTest1" OnClientClick="return SetIndex(1)" runat="server" Text="Set Index2" />
<asp:Button ID="btnTest2" OnClientClick="return SetIndex(2)" runat="server" Text="Set Index3" />

Step 3: Create SetIndex javascript method which sets the index of Accordion Pane based on the index number passed to SetIndex method.

<script language="javascript" type="text/javascript">

function SetIndex(index) {
var acc = $get('<%=MyAccordion.ClientID%>');
if (acc != null) {
var accBehave = acc.AccordionBehavior;
accBehave.set_SelectedIndex(index);
}
return false;
}

</script>

Visit Set Index of AccordionPane using Javascript for live demo and downloadable code.

LINQ - How to read and search an element in XML

In this article, I will explain how to use XDocument to read XML Attribute value.

Step 1: Add a TextBox and Button, TextBox will be used to search the attribute value based on the Id entered in the textbox.

<asp:TextBox ID="txtId" runat="server"></asp:TextBox>
<asp:Button ID="btnGetValue" Text="Get Value" runat="server" OnClick="btnGetValue_Click" />

Step 2: Create a XML file like below structure.

<Messages>
<Message id='One'>
<Display>Messageid is one.</Display>
</Message>
<Message id='Two'>
<Display>Messageid is two.</Display>
</Message>
<Message id='Three'>
<Display>Messageid is three.</Display>
</Message>
<Message id='Four'>
<Display>Messageid is four.</Display>
</Message>
<Message id='Four'>
<Display>Messageid is again four.</Display>
</Message>
<Message id='One'>
<Display>Messageid is again one.</Display>
</Message>
</Messages>

Step 3: Create a method GetValues which will return List of matching elements found in the XML document.

public static List<string> GetValues(string strFileName, string strDescendants, string strAttribute, string strAttributeValue, string strElement)
{
XDocument xmlDoc = XDocument.Load(strFileName); //Open XML file
var xmlValue = from c in xmlDoc.Descendants(strDescendants)
where c.Attribute(strAttribute).Value.ToLower().Equals(strAttributeValue.ToLower())
select (string)c.Element(strElement);
List<string> strList = xmlValue.ToList<string>();
return strList;
}

Step 4: btnGetValue_Click event of button will invoke GetValues

protected void btnGetValue_Click(object sender, EventArgs e)
{
string strFileName = Server.MapPath("Message.xml");
string strDescendants = "Message";
string strAttribute = "id";
string strAttributeValue = txtId.Text;
string strElement = "Display";
List<string> lstValues = GetValues(strFileName, strDescendants, strAttribute, strAttributeValue, strElement);
if (lstValues.Count > 0)
{
foreach (string strValue in lstValues)
{
Response.Write(strValue + "<br/>");
}
}
else
{
Response.Write("No matching record found.");
}
}

Visit LINQ - How to read and search an element in XML for live demo and download the code

Change image in AccordionPane Header on collapse and expand

Here's how to use image in AccordionPane header and change the image on expand and collapse.

Step 1: Create an Accordion with three AccordionPane

<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Content>
First Accordion Pane
Content>
ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Content>
Second Accordion Pane
Content>
ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
<Content>
Third Accordion Pane
Content>
ajaxToolkit:AccordionPane>
Panes>
ajaxToolkit:Accordion>

Step 2: Add

in each AccordionPane like below. Header contains anchor and image, anchor tag invokes javascript meethod ChangeImage. The id of the image needs to passed to ChangeImage javascript. The id of the image should be same followed by 1,2 and 3 etc because we need to chane image(Collapse Image) of previously opened accordion pane.

This header will go in the AccordionPane with ID AccordionPane1

<Header>
<a href="" onclick="ChangeImage('imgAcc1');" class="accordionLink">
<img src="right_arrow.jpg" id="imgAcc1" />Accordion Image Demo1a>
Header>

This header will go in the AccordionPane with ID AccordionPane2

<Header>
<a href="" onclick="ChangeImage('imgAcc2');" class="accordionLink">
<img src="right_arrow.jpg" id="imgAcc2" />Accordion Image Demo2a>
Header>

This header will go in the AccordionPane with ID AccordionPane3

<Header>
<a href="" onclick="ChangeImage('imgAcc3');" class="accordionLink">
<img src="right_arrow.jpg" id="imgAcc3" />Accordion Image Demo3a>
Header>

Step 3: Add ChangeImage javascript, while loop will execute less than or equal to number of images.

<script language="javascript" type="text/javascript">
function ChangeImage(imgID)
{
var imgURL = document.getElementById(imgID).src.split('/');
if(imgURL[imgURL.length - 1] == 'down_arrow.jpg')
{
document.getElementById(imgID).src = "right_arrow.JPG";
}
else
{
document.getElementById(imgID).src = 'down_arrow.jpg';
}
var cnt = 1;
while(cnt <= 3)
{
var imgIdRec = "imgAcc" + cnt;
if(document.getElementById(imgIdRec)!= 'null' && imgIdRec != imgID)
{
var imgURL = document.getElementById(imgIdRec).src.split('/');
document.getElementById(imgIdRec).src = "right_arrow.JPG";
}
cnt = cnt + 1;
}
}
script>

Visit www.dotnetspeaks.com for live Demo and download the code