zudolab jqAccordion
This is JavaScript off demo. No JavaScript files are loaded in this document.
[accordionExample1] Class specified container accordion
new jqAccordion({
container: "div.accordionExample1",
item: "div.item",
header: "h2 a",
body: "div.body"
});
Specify "container", "item", "header" and "body".
"container" must have at least 1 "item" in it.
"item" must have "header" and "body" in it.
Class "opened" will be added to the active "item".
You can add "showThis" class to the "item" to show the "item" first.
Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail.
Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail.
Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail.
Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail.
Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail.
Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail.
[accordionExample2] ID specified container accordion
new jqAccordion({
container: "#accordionExample2",
item: "div.item",
header: "h2 a",
body: "div.body"
});
"container" is allowed to be multiple like the example above.
But, I recommend you to specify the "container" by ID selector.
Because ID selector is faster than any other selectors.
Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail.
Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail.
Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail.
[accordionExample3] Img accordion
new jqAccordion({
container: "#accordionExample3",
item: "div.item",
header: "h2 a",
body: "div.body"
});
Each "header" can be the img.
Put the off img to the "off" directory and active img to "on" directory.
Each imgs must be the same file name.
They will be preloaded after the document was loaded and, will be swapped if the active item was changed.
Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail.
Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail.
Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail.
[accordionExample4] Slide accordion
new jqAccordion({
animation: "slide",
container: "#accordionExample4",
item: "div.item",
header: "h2 a",
body: "div.body"
});
animation:"slide"
adds slide effect.
Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail.
Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail.
Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail.
[accordionExample5] height specified accordion
new jqAccordion({
animation: "slide",
bodyHeight: "10em",
container: "#accordionExample5",
item: "div.item",
header: "h2 a",
body: "div.body"
});
bodyHeight:CSS_HEIGHT_VALUE
fixes the height of the body.
Specify the css height value (NNpx, NNem, etc...) here.
Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail.
Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail.
Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail.
[accordionExample6] mouseover accordion
new jqAccordion({
trigger: "mouseover",
animation: "slide",
bodyHeight: "200px",
container: "#accordionExample6",
item: "div.item",
header: "h2 a",
body: "div.body"
});
trigger: "mouseover"
enables mouseover accordion.
I recommend you to set bodyHeight option when use this.
Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail. Group1 Detail.
Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail. Group2 Detail.
Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail. Group3 Detail.