New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:

Expanding a content via an arbitrary link

Besides specifying a particular content be expanded automatically and by default when the page loads, via the "selectedli: [0, true]" setting, you can also do the same on demand using an arbitrary link, or by passing a parameter string to the current page's URL.

For the former, just call the function:

haccordion.expandli('accordionid', index)

Where "accordionid" is the ID of the accordion's main DIV, and index is the index number of the content within it you wish to expand (0=1st content, 1=2nd etc). Take a look at the below links following the accordion:

  • This accordion content has a custom full width of 250px. Note where the two inline CSS are added within the markup.
  • This accordion content has a custom full width of 180px. Note where the two inline CSS are added within the markup.
  • This accordion content has a custom full width of 350px. Note where the two inline CSS are added within the markup.
  • This accordion content has a custom full width of 550px. Note where the two inline CSS are added within the markup.

Expand 1 Panel | Expand 2nd Panel | Expand 3rd Panel | Expand 4th Panel

Expanding a content by passing a parameter into the URL string

Another way of expanding a content inside your horizontal accordion is by passing in a parameter to the current page's URL specifying the accordion ID and the index of the content to expand. The syntax is:

<a href="targetpage.htm?accordionid=index">A link</a>

where again "accordionid" is the ID of the accordion's main DIV, and index is the index number of the content within it you wish to expand (0=1st content, 1=2nd etc). The following links causes different contents within the horizontal accordion above to expand by default when the page is loaded:

<a href="haccordion_suppliment2.htm?hc1=1">Expand 2nd content of horizontal accordion on this page when it loads</a>

Reload the current page and see a different content expanded by clicking on the following two links:

The URL parameter method of content selection always takes precedence over both the persisted content state and default selected content setting within the script.

Table Of Contents

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