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.
Expand 1st header | Collapse 1st header | Toggle 2nd header | Collapse all | Expand all
The key is to call one of the below functions on your page:
Method | Description |
---|---|
ddaccordion.expandone('header_class', index) |
Expands a particular header's content. Parameters:
Example: <a href="#" onClick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> |
iddaccordion.collapseone('header_class', index) |
Collapses a particular header's content. Parameters:
|
ddaccordion.toggleone('header_class', index) |
Toggle's the state of a particular header's content. If
the content was previously collapsed, it will expand it, and visa versa. Parameters:
<a href="#" onClick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a> |
ddaccordion.expandall('header_class') |
Expands all headers within a group (one with the same
shared CSS class name). Parameters:
Example: <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. |
ddaccordion.collapseall('header_class') |
Collapses all headers within a group (one with the same
shared CSS class name). Parameters:
|
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>
where "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:
<script type="text/javascript">
//Initialize first demo:
ddaccordion.init({
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
"
"
"
</script>
Dogs
Cats
Rabbits
The following links (presumably on other pages) causes different headers
within this Accordion content instance to load by default when
"target.htm"
loads:
<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>
For a demo, load this page again with the 1st header selected or the 3rd header selected by default using the URL parameter method.
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