Advanced Search

Results 1 to 6 of 6

Thread: How to move Accordion Content Script to an external js file

  1. #1
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to move Accordion Content Script to an external js file

    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

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    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;
    Code:
    <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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    You need the init() in the HTML to get the accordion working.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,693
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    Like any other on page script, you can put the contents minus the script tags:

    Code:
        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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Perfect. Thank you.

Similar Threads

  1. Ultimate Fade-in slideshow * move script to external file - out of header
    By SteveNelson in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-01-2009, 05:45 AM
  2. Embed external custom file for Glossy Accordion Menu?
    By M0nTy in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-19-2008, 08:47 PM
  3. How to move array declaration to external .js file???
    By Strangeplant in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-23-2007, 06:38 PM
  4. Ajax Tabs Content script with external asp file
    By mexcal in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-24-2007, 03:30 PM
  5. Ajax Tabs Content script - loading external file prob
    By cfemocha in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-03-2006, 08:09 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •