How to move Accordion Content Script to an external js file

[3matt3s]

1) Script Title: Accordion Content script (v2.0)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...daccordion.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]

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]

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]

You need the init() in the HTML to get the accordion working.

[jscheuer1]

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]

Perfect. Thank you.