Adding arbitrary links on page that expand/ collapse the contents
Besides having the user explicitly clicking on the headers to show and hide content, you can also add this functionality elsewhere on your page, such as text links that expands a particular header's content, toggle between expand/collapse, or even expand all headers within the same group.
The key is to call one of the below functions on your page:
||Expands a particular header's content.
<a href="#" onClick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a>
||Collapses a particular header's content.
||Toggle's the state of a particular header's content. If
the content was previously collapsed, it will expand it, and visa versa.
<a href="#" onClick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a>
||Expands all headers within a group (one with the same
shared CSS class name).
<a href="#" onClick="ddaccordion.expandall('mypets'); return false">Expand all headers</a>
Note: If you call this method on a group of contents that's been set to allow only one open at any given time, only the very last content will expand as a result due to this stipulation.
||Collapses all headers within a group (one with the same
shared CSS class name).
Remote links that expand select headers on the target page
You can define a link on another page that causes the desired headers on the target page (one containing Accordion Content) to expand when the later is loaded. In other words, depending on the referring page, different headers can be expanded by default. This is done by adding to the original link a URL parameter string specifying which headers for which header groups you want to expand. The syntax is:
<a href="target.htm?headerclass=index1,index2,etc">Target Page</a>
headerclass" is the shared CSS class name of the headers
group in question, and
index1,index2 etc the index of the header(s)
to expand relative to its peers. Separate each index with a comma (unless
there's only 1 index). For example, given the below initialization code:
//Initialize first demo:
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
The following links (presumably on other pages) causes different headers
within this Accordion content instance to load by default when
<a href="target.htm?mypets=0">Target Page (1st header expanded by default)</a>
<a href="target.htm?mypets=0,2,3">Target Page (1st, 3rd and 4th headers expanded by default)</a>
If your page contains multiple Accordion content instances and you wish to expand certain headers in all of them, you can do that as well:
<a href="target.htm?mypets=2,3&myfamily=1,2,3">Expand headers for multiple Accordion Content instances on target page</a>
The URL parameter method of headers selection overrides both the persisted
header states and default selected headers settings within the script. However,
if you've set
collapseprev: true inside the initialization code
and try to select more than 1 header to be expanded using this method, only the last
one on the list will be honoured.
Table Of Contents