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)
* Please keep this notice intact
* 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: