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:

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

What is JavaScript?
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
Difference betwen Java & JavaScript?
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
What is Ajax?
Ajax is a group of inter-related web development techniques used for creating interactive web applications. A primary characteristic is the increased responsiveness and interactiveness of web pages achieved by exchanging small amounts of data with the server "behind the scenes" so that the entire web page does not have to be reloaded each time the user performs an action. This is intended to increase the web page's interactivity, speed, functionality, and usability.

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:

  • 'header_class': The shared CSS class name of the header
  • index: An integer denoting the position of the target header relative to its peers (ones with the shared CSS class name). 0=1st header, 1=2nd etc.

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:

  • 'header_class': The shared CSS class name of the header
  • index: An integer denoting the position of the target header relative to its peers (ones with the shared CSS class name). 0=1st header, 1=2nd etc.
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:

  • 'header_class': The shared CSS class name of the header
  • index: An integer denoting the position of the target header relative to its peers (ones with the shared CSS class name). 0=1st header, 1=2nd etc.

<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:

  • 'header_class': The shared CSS class name of the headers to expand, one at a time.

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:

  • 'header_class': The shared CSS class name of the headers to collapse, one at a time.

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

The dog is a domestic subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species.

Cats

The Cat, also known as the Domestic Cat or House Cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.

Rabbits

Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are seven different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbit (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, endangered species on Amami O-shima, Japan).

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