View Full Version : DD Accordion - re-Init JS Events after Ajax

09-03-2008, 10:19 AM
1) Script Title: DD accordion menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

3) Describe problem:

Hi, I have adapted this amazing script so that I can generate dynamic accordions depending on the returned dataset. This works great!

Because some queries can return large datasets requiring 15+ headers I want to add paging - meaning every 15 headers add a paging link (1,2,3,4,5) when it's clicked use Ajax to load the next 15 headers. - This works great too!

The problem I have is that when using Jquery Ajax to remove() and append() the accordion HTML, none of the events (i.e. expand, collapse) work on the new HTML as they don't have the events associated with them. Simply running ddaccordion.init() doesn't seem to do the trick??

Anyone know how to do this?

Thanks in advance,


09-03-2008, 01:05 PM
Ok so with further testing.. I just can't run ddaccordion.init()

All the accordion HTML is removed from the page and the page just hangs.. but I receive no errors.. I just don't know enough about eventing or js itself to re-initialise properly...

Any help much appreciated?!?!?!?!

09-04-2008, 04:18 AM
It's possible to add new headers dynamically to your page and call ddaccordion.init() on the new result. The key though is to first remove the following code in red inside the .js file:

document.write('<style type="text/css">\n')
document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents

This is what's causing the page to hang/ rewrite when you call init() dynamically. Then, check out the following complete example, with the important parts highlighted in red:

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>

<script type="text/javascript" src="ddaccordion.js">

* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use


<style type="text/css">

.mypets{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #E1E1E1;

.openpet{ /*class added to contents of 1st demo when they are open*/
background: yellow;

display: none;


<script type="text/javascript">

//Initialize first demo:

var accordionsetting={
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //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: true, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //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: "fast", //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




<h2>Example 1:</h2>
<a href="#" onClick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> | <a href="#" onClick="ddaccordion.collapseone('mypets', 0); return false">Collapse 1st header</a> | <a href="#" onClick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a>

<h3 class="mypets">Dogs</h3>
<div class="thepet">
<img src="http://i10.tinypic.com/7xlrga1.jpg" />
The dog is a domestic subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been (and continues to be) one of the most widely-kept working and companion animals in human history, as well as being a food source in some cultures.

<h3 class="mypets">Cats</h3>
<div class="thepet">
The Cat, also known as the Domestic Cat or House Cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.

<h3 class="mypets">Rabbits</h3>
<div class="thepet">
Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are seven different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbit (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, endangered species on Amami O-shima, Japan). There are many other species of rabbit, and these, along with cottontails, pikas, and hares, make up the order Lagomorpha. Rabbits generally live between four and twenty years.

<script type="text/javascript">

function addnewheader(){
jQuery('<h3 class="mypets">Horses</h3>\n<div class="thepet">Horses are great!</div>').appendTo('body')


<a href="javascript:addnewheader()">Add new Horse header</a>

With the removal of the document.write() lines inside the .js file, you should manually declare in your CSS a selector that hides the headers (first part in red above). Then, inside your function to dynamically add a header to the page, make sure you call the line:


to then unbind all events on the existing headers first before finally calling init().

12-02-2008, 01:53 PM
Hi Guys

Been looking around the web for the best possible solution... Here is my issue

I've got this page... http://www.wozaonline.com/client/MKKSports/Main/Includes/attachedcollars.asp?theColour=C6940D&thestyle=CLASSIC

It works perfect using the accordian system and stuff.

Now what i want to do is to bring that menu (collars and all the content undernearth that into another page)...

In this other page is a DIV tag called... dyncollars . When something is click on this other page... a javescript function then does an AJAX call which pulls out the data from the page menioned above (the one with all the collars) and inserts the innerHTML into that DIV.. IE..


theresponse being the html that comes from the collars page.

Trouble is... it brings in the menu but when trying to click on the menu it doesnt expand... All that comes out is "Select Collars". Its almost like the bindign has been lost so the page doesnt know what to do if i click on Select Collars. All i want it it do is expand my menu

If you need more info please let me know what i can do to get this collars menu to work in another page!!

Thanks and i appreciate your earlierst reply