DaniWeb is an exciting community for web developers, Internet marketers, and technology enthusiasts.
|
|
Note: Updated October 3rd, 08' to v1.6. See top
of ddaccordion.js for changed log.
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.
- Specify whether at least one header should be open at all times (so
never all closed). New
in v1.5
- Set whether the headers should be activated "
click" or "mouseover".
Default is "click". New
in v1.4
- When headers are set to be activated "mouseover", set delay (in
millisec) before this happens. New
in v1.6
- 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() and onopenclose()
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!
Demos:
| Default example (mouseover):
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.
|
- Headers activated onMouseover, with 200 millisec delay.
- 1st content open by default.
- Only one content allowed open at any time.
- Persist state of opened contents within browser session
- Headers of opened contents get a CSS class of "
openpet"
applied.
- Reload page and select the 3rd
content using a URL parameter
|
| Alternate example (onclick):
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.
|
- Headers activated onClick.
- No contents open by default.
- Multiple contents can be open at the same time.
- Headers of opened and closed contents each get a CSS class of "
openlanguage"
and "closedlanguage" applied, respectively.
- Headers of opened and closed contents each get a different icon
image added in front of it (arbitrary HTML).
- Reload page and select
the 1st, 2nd, and 3rd contents using a URL parameter
|
Directions:
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 two external
.js files, which you
need to download below (right click/ select "Save As"):
- ddaccordion.js
- jquery-1.2.6.pack.js
By default, upload these files 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 the two demos you see above.
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">
bunny content here...
</div>
Then, in the HEAD section of the script, call
ddaccordion.init() with the appropriate settings:
//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" or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds
before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)?
true/false
defaultexpanded: [0,1], //index of content(s) open by default [index1, index2,
etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always
(so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when
it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's
collapsed and expanded
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200),
or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have
initalized
//do nothing
},
onopenclose:function(header, index, state, isclicked){ //custom code to run
whenever a header is opened or closed
//do nothing
}
})
Each of the individual settings are commented, though "togglehtml"
requires a bit more explanation. This setting 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: "none",
"prefix", "suffix", or "src". The 2nd and
3rd parameter are the HTML to add to each header when it's collapsed and
expanded, in that order. Here are a few possible scenarios:
- togglehtml: ["none", "", ""], //no additional HTML added to header
- togglehtml: ["prefix", "[closed] ", "[open] "], //two text added in front of the
header
- togglehtml: ["suffix", " <img src='close.gif' />", " <img src='open.gif' />"],
//two images added to the end of the header
- togglehtml: ["src", "minus.gif", "plus.gif"], //assuming each header is
an image itself, toggle between two images depending on state
Set the first parameter to "src" like in the
last line above if your headers are images themselves, and you wish
to update their "src" property depending on the content state.
Here's an example:
JavaScript Reference
Welcome to our JavaScript Reference, a comprehensive listing of JavaScript objects, properties, and methods, such as Arrays, Math, Regular Expressions, and more.
The DOM (Document Object Model) gives you generic access to most elements, their styles and attributes in a document. This is a no-nonsense, easy to follow DOM reference for JavaScript.
IE Filters reference
Multimedia Filters, supported in IE5.5+, allows you to easily add rich visual effects to your content. Defined using CSS and further manipulated using JavaScript, this is a comprehensive IE Filters and Transitions reference.
Script setting:
headerclass: "myheader",
contentclass: "mycontent",
,
,
togglehtml: ["src", "minus.gif", "plus.gif"], |
|
The HTML:
<img src="minus.gif"
class="myheader" /><a href="#">JavaScript Reference</a><br
/>
<div class="mycontent">
1st content here...
</div>
<img src="minus.gif" class="myheader" /><a href="#">DOM Reference</a><br />
<div class="mycontent">
2nd content here...
</div>
<img src="minus.gif" class="myheader" /><a href="#">IE Filters reference</a><br
/>
<div class="mycontent">
3rd content here...
</div>
|
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 "togglehtml":
["src", "minus.gif", "plus.gif"],
On the supplimentary page, lets see
the methods you can call anywhere on your page to simulate a user clicking on a
header.
This script consists of an index page plus several supplementary pages:
|
Dynamic Content 
