Accordion Content Ajax Prefix modification

[larrysanders]

1) CODE TITLE: Accordion Content script Ajax Prefix Mod

2) AUTHOR NAME/NOTES:

3) DESCRIPTION: This is a modification of the script on http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm to allow accordions inside other accordions load ajax content separately.

4) URL TO CODE: http://httu.co/blog/ddaccordion_ajax_mod/

You can view source on that page to see the usage

The modified javascript: http://httu.co/blog/ddaccordion_ajax_mod/ddaccordion_ajaxmod.js

Usage Example:


//Initialize main menu:
ddaccordion.init({
headerclass: "hobies", //Shared CSS class name of headers group
contentclass: "hobbiesdiv", //Shared CSS class name of contents group
revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
ajaxclassname: "hobies",
mouseoverdelay: 300, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["hobiesclosed", "hobiesopen"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "500", //speed of animation: "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

//Initialize home menu:
ddaccordion.init({
headerclass: "sports", //Shared CSS class name of headers group
contentclass: "sportsdiv", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
ajaxclassname: "sports",
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["sportsclosed", "sportsopen"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
//togglehtml: ["prefix", "<a href=\"#\" name=\"subclosed\"></a>", "<a href=\"#\" name=\"subopened\"></a>"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//donothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

html:


<div class="hobbies">Sports</div>
<div class="hobbiesdiv">
<div class="sports">Football</div>
<div class="sportsdiv">
<a class="sportshiddenajaxlink" href="sports/football.html">Loading football div. The hobbies div knows this isn't meant for it.</a>
</div>
<div class="sports">Soccer</div>
<div class="sportsdiv">
<a class="sportshiddenajaxlink" href="sports/soccer.html">Loading soccer div. The hobbies div knows this isn't meant for it.</a>
</div>

</div>

<div class="hobbies">Crafts</div>
<div class="hobbiesdiv">

<a class="hobbieshiddenajaxlink" href="crafts.html">Loading the crafts div. The hobbies div knows it's meant for it.</a>

</div>



I'm sure my code isn't optimal, but it works :-)

[mertolapuz@gmail.com]

Hey, I'm new to this code making and I'm here to know how I will be able to submit my script and what are the ground rules. Of course, I'm the author of this script, although I have to retest it for the tenth time just to be sure I am
submitting a functional code. Be back again after the retest. Cheers.

[Twigger]

Hmm, I tried your code and it worked... Here's the code that worked for me:

<%@ Page Language="C#" AutoEventWireup="true" Inherits="AJAXEnabledWebApplication1._Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!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>Test</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<ajaxToolkit:Accordion ID="Accordion1" runat="server" Height="224px" Width="450px">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server">
<Header>Heading 1</Header>
<Content>Content ash ahf alkjsh aushaiuh ajks uwer iqwu</Content>
</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane5" runat="server">
<Header>Heading 1</Header>
<Content>Content ash ahf alkjsh aushaiuh ajks uwer iqwu</Content>
</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane6" runat="server">
<Header>Heading 1</Header>
<Content>Content ash ahf alkjsh aushaiuh ajks uwer iqwu</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>