PDA

View Full Version : How to move Accordion Content Script to an external js file



3matt3s
03-25-2013, 03:51 PM
1) Script Title: Accordion Content script (v2.0)

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

3) Can someone please tell me how to get the Accordion script to work in an external js file?
Do I need to add some sort of "$(document).ready(function() { });"
to the existing script? Please provide step by step info (new to js)
Thanks

Beverleyh
03-25-2013, 04:36 PM
The script is provided in an external file called "ddaccordion.js" - download that from the script demo page and include it in the head section of your web page using a line of code like this;
<script type="text/javascript" src="ddaccordion.js"></script>
If this is not what you mean, please describe what you'd like to do more clearly, and provide a link to your page.

3matt3s
03-25-2013, 05:00 PM
Here is the link: http://comm-arts.com/dsv2013/
I do have this script included as well: <script type="text/javascript" src="ddaccordion.js"></script>
Below that script is the sidebar accordion script (commented in source - starts off with ddaccordion.init ({)
When I remove that sidebar accordion script from my html, the sidebar is completely expanded with no functionality

Beverleyh
03-25-2013, 05:19 PM
You need the init() in the HTML to get the accordion working.

jscheuer1
03-25-2013, 05:20 PM
Like any other on page script, you can put the contents minus the script tags:


ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
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: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='images/plus.gif' class='statusicon' />", "<img src='images/minus.gif' class='statusicon' />"], //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(headers, 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
}
})

In an external file. Using a text only editor like NotePad, save the above as - say accordioninit.js and put it in the same folder as your page. Then replace the entire init script, including its script tags with:


<script type="rext/javascript" src="accordioninit.js"></script>

If this script is to be used by other pages, and they're not in the same folder as this page, you would need to provide the path to the script in its src attribute, as well as provide the absolute path to the images referenced inside it.

3matt3s
03-25-2013, 06:05 PM
Perfect. Thank you.