Accordion Content script (v2.2)
Aug 28th, 18' (v2.2): Added option "scrolltocontent
" to scroll to the expanded
content in question after it expands,
which is useful if the content is in a whole different area of the page
relative to the header.
Description: Group contents together and reveal them on demand when the user clicks on their associated headers, with Accordion content script! Specify whether only one content within the group should be open at any given time, style the headers depending on their content state, and even enable persistence so the state of the contents is preserved within a browser session. The script enlists the help of the jQuery library for its engine. There are lots of configurable options, so lets get to them:
- Headers and their contents to expand/collapse on the page are identified through the use of shared CSS class names for easy set up.
- Ability to specify which contents should be expanded by default when the page first loads.
- Specify whether only one content should be open at any given time (collapse previous before expanding current.
- Ajax content support added, so a given header's content can be dynamically fetched from an external file and only when requested. New in v1.9
- Specify whether at least one header should be open at all times (so never all closed).
- Set whether the headers should be activated "
click
" or "mouseover
". If the headers themselves are hyperlinked and set to activate via "click
", you can optionally have the browser go to that URL upon expanding the content, instead of doing nothing. New in v1.7 - Ability to scroll to the expanded header in question after it expands, which is useful if the header contains a lot of content and expanding it changes the scroll position of the document. New in v2.1
- Ability to scroll to the expanded content in question after it expands, which is useful if the content is in a whole different area of the page relative to the header. New in v2.1
- When headers are set to be activated "mouseover", set delay (in millisec) before this happens.
- Enable optional persistence so when the user expands a header then returns to the page within the same browser session, the content state is preserved.
- Style the two states of the headers easily by setting two different CSS classes to be added to the header depending on whether its content is expanded or collapsed. You can also add additional HTML to the beginning or end of each header, such as an icon image that reflects the current state of the content.
- Two event handlers
oninit()
andonopenclose()
can be used to run custom code when an Accordion Content first loads and whenever a header is opened/closed, respectively. - Arbitrary links can be defined elsewhere on the page performing the same functions as if the user had directly clicked on a header, such as expand a particular header, toggle a header, or expand all headers within a group.
- A link from another page linking to the target page can cause the desired headers on the later to expand when loaded, via the URL parameter string.
You don't have to be an accordion player to appreciate this script!
Note: See also Horizontal Accordion script.
Demos:
Mouseover example: Expand 1st header | Collapse 1st header | Toggle 2nd header 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. The domestic dog has been (and continues to be) one of the most widely-kept working and companion animals in human history, as well as being a food source in some cultures.
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). There are many other species of rabbit, and these, along with cottontails, pikas, and hares, make up the order Lagomorpha. Rabbits generally live between four and twenty years.
|
|
Ajax contents example:
Langkawi
Japan
Thailand
|
|
onClick example with icon indicators: 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.
|
|
Step 1: Insert the following code in the HEAD section of your page
Note the "doctype" code at the very top- this script requires a valid doctype in order to work correctly. You can remove it if your page already has one declared. The code above references 1 external .js file and an image file, which you need to download below (right click/ select "Save As"):
- ddaccordion.js (customize "
ajaxloadingmsg
" variable near the top inside this file). - loading2.gif (image used to indicate Ajax content is loading, if enabled)
By default, upload this file to the same directory as where your webpage resides.
Step 2: Insert the below sample code into the BODY section of your page:
It contains the HTML for two demos. That's it for installation!
Set up Information
Setting up this script on your site involves first identifying the headers and their corresponding contents on your page with two shared CSS class names, for example:
<h3 class="mypets">Dogs</h3>
<div class="thepet">
doggy content here...
</div>
<h3 class="mypets">Cats</h3>
<div class="thepet">
kitty content here...
</div>
<h3 class="mypets">Rabbits</h3>
<div class="thepet">
<a class="hiddenajaxlink" href="mycontent.htm">LangKawi</a>
</div>
<h3 class="mypets">Rabbits</h3>
<div class="thepet">
<a class="hiddenajaxlink" href="mycontent2.htm">Japan</a>
</div>
The element with the red CSS class in this case are your headers, and the green your sub content element containing the desired content to show and hide. This content can either be inline HTML markup, or ajax content that's defined inside an external file on your server and only loaded when the header is expanded. To specify ajax content for a header, inside the corresponding content container, just define a link that points to an external file on your server that houses this content using the syntax:
<a class="hiddenajaxlink" href="/path/content.htm">Link anchor text</a>
The link must carry a CSS class of "hiddenajaxlink
"
to give it special meaning. When such a link is detected the script will
dynamically load the file specified inside this link and use it as the
corresponding header's content the first time it is expanded, overwriting the
link and everything else inside the content container.
FYI: For Ajax based Header Contents, the content is only fetched the first time the header is actually expanded, then subsequently cached from thereon. The content is also accessible to users with JavaScript disabled, since for those users, all the headers appear expanded by default, with the link to the ajax content visible and accessible.
Then, in the HEAD
section of the script, call
ddaccordion.init()
with the appropriate options:
Option | Description | |||
headerclass | Shared CSS class name of headers containers. | |||
contentclass | Shared CSS class name of contents containers. | |||
revealtype | Reveal content when user clicks or
onmouseover the header? Valid values are: "click ", "clickgo ",
or "mouseover ".The difference between " |
|||
mouseoverdelay | If revealtype above is set to "mouseover ",
set delay in milliseconds before header expands onMouseover. |
|||
collapseprev | Collapse previous content (so only one open at any time)? true/false. | |||
defaultexpanded | Index(es) of content(s) that should be open
by default in the format [index1, index2, etc] , where 0=1st
content, 1=2nd content etc. [] denotes no content should be
open by default. |
|||
scrolltoheader v2.1 option |
If set to true will scroll to the expanded
header after its content has been revealed. It is only triggered when
the user explicitly expands a header (either by clicking on a header or
calling the expandone() method), and NOT when the page
initially loads. Defaults to false. |
|||
scrolltocontent v2.2 option |
If set to true will scroll to the expanded
content after it is revealed. It is only triggered when
the user explicitly expands a header (either by clicking on a header or
calling the expandone() method), and NOT when the page
initially loads. Defaults to false. Note that this setting overrides
scrolltoheader above if both are set to true. |
|||
onemustopen | Collapse previous content (so only one open at any time)? true/false. | |||
animatedefault | Should contents that are open by default be animated into view? true/false. | |||
persiststate | Persist state of opened contents within a browser session, so returning to the page recalls the saved states? true/false. | |||
toggleclass | Specifies two CSS classes to be applied to
the header when it's collapsed and expanded, respectively, in the form
["class1", "class2"] . Enter a blank string inside either of
the two to denote no CSS class, for example: ["", "class2"] . |
|||
togglehtml | This option lets you optionally add
additional HTML to each header when it's expanded and collapsed,
respectively. It accepts 3 parameters:togglehtml: ["none", "", ""], For the first parameter, 4 possible values supported: "
Set the first parameter to "
In the above example, instead of using regular container headers like a
H1 tag, I'm using images instead. In other words, clicking on the images
will expand/collapse content. In such a case, I can get the script to
dynamically update the image shown by setting " |
|||
animatespeed | Speed of sliding animation. Value should be
an integer in milliseconds (ie: 200), or one of the keywords "fast ",
"normal ", or "slow ". |
|||
oninit | Event handler that fires when the headers have initailized for the first time on the page. For more info, see: "Taking advantage of the oninit() and onopenclose() event handlers." | |||
onopenclose | Event handler that fires whenever a header is expanded or contracted. For more info, see: "Taking advantage of the oninit() and onopenclose() event handlers." |
On the supplimentary page, lets see the methods you can call anywhere on your page to simulate a user clicking on a header.
Table Of Contents
This script consists of an index page plus several supplementary pages: