New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

Defining your accordion's markup in an external file

You can define the entire HTML markup of your horizontal accordion in an external HTML file and have the script dynamically add it to your page (inside an empty DIV) instead. The first step is just to move the entire HTML markup to an external file, including the outermost DIV of the accordion. Here's an example:

If you view the source of this external file, you'll notice that it's identical to the HTML markup of an accordion as if it's defined inline on the page, including the required unique ID attribute and CSS classes added to the various containers.

Having done this, you should now introduce the "ajaxsource" option inside your initialization code on the page that will be displaying the accordion, such as:

<head>

<link rel="stylesheet" type="text/css" href="haccordion.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="haccordion.js">

/***********************************************
* Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<style type="text/css">

#hc li{
margin:0 0 0 0; /*Spacing between each LI container*/
border: 12px solid black;
}

#hc li .hpanel{
padding: 5px; /*Spacing between each LI container*/
background: #E2E9FF;
cursor: hand;
cursor: pointer;
}

</style>

<script type="text/javascript">

haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false, //collapse current expanded li when mouseout into general space?
ajaxsource: {container:'someemptydiv', path:'haccordionfile.htm'} //<-No comma following last setting!
})

</script>

</head>

<body>

<div id="someemptydiv"></div>

</body>

Example:

"ajaxsource" contains two properties that should be set to the ID of an empty DIV on your page you want the markup to be inserted into, plus the path to the file on your server containing the accordion markup, respectively. Notice that you still need to install the necessary accordion script references and global CSS in the HEAD section of your target page, and not the external page containing the accordion markup.

Table Of Contents

This script consists of an index page plus two supplementary pages: