Accordion command
Create an accordion style inline content navigation.
Basic Usage (HTML)
data-jkit="[accordion:speed=slow]"
Advanced Init (JavaScript)
$('#myelement').jKit('accordion', { 'speed': 'slow' });
Options
| Option | Values | Default | Description |
|---|---|---|---|
| active | Int | 1 | The initially active part or 0 for no active parts on init |
| animation | “fade”, “slide” or “none” | slide | The type of animation used for the transition |
| speed | Int or “fast”, “slow” (Milliseconds) | 250 | The duration of the animation in milliseconds, bigger = slower. |
| easing | String (“linear” or easing plugin option) | linear | The easing behavior of the animation |
Events
Examples
Basic example:
A basic accordion:
Title 1
Text 1
Title 2
Text 2
Title 3
Text 3
Source:
<div class="accordion" data-jkit="[accordion]"> <div> <h3>Title 1</h3> <div> Text 1 </div> </div> <div> <h3>Title 2</h3> <div> Text 2 </div> </div> <div> <h3>Title 3</h3> <div> Text 3 </div> </div> </div>
Advanced example:
An advanced example with jKit stuff inside:
Title 1
Title 2
Title 3
- List Item 1
- List Item 2
- List Item 3
Source:
<div class="accordion" data-jkit="[accordion]"> <div> <h3>Title 1</h3> <div> <div data-jkit="[lorem:length=4000]"></div> </div> </div> <div> <h3>Title 2</h3> <div> <div id="mydiv7" data-jkit="[slideshow:interval=4000;speed=250;animation=fade]"> <a href="http://fredibach.ch" target="_blank"><img src="../img/slides/p1.jpg"></a> <a href="http://fredibach.ch" target="_blank"><img src="../img/slides/p2.jpg"></a> <a href="http://fredibach.ch" target="_blank"><img src="../img/slides/p3.jpg"></a> <a href="http://fredibach.ch" target="_blank"><img src="../img/slides/p4.jpg"></a> <a href="http://fredibach.ch" target="_blank"><img src="../img/slides/p5.jpg"></a> </div> </div> </div> <div> <h3>Title 3</h3> <div><ul><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ul></div> </div> </div>
Dow the rabbit hole:
An example with accordions inside other accordions:
Title 1
Subtitle 1
Subsubtitle 1
Subsubtext 1
Subsubtitle 2
Subsubtext 2
Subtitle 2
Subtext 2
Subtitle 3
Subtext 3
Title 2
Text 2
Title 3
Text 3
Source:
<div class="accordion" data-jkit="[accordion]"> <div> <h3>Title 1</h3> <div> <div class="accordion" data-jkit="[accordion]"> <div> <h3>Subtitle 1</h3> <div> <div class="accordion" data-jkit="[accordion]"> <div> <h3>Subsubtitle 1</h3> <div> Subsubtext 1 </div> </div> <div> <h3>Subsubtitle 2</h3> <div> Subsubtext 2 </div> </div> </div> </div> </div> <div> <h3>Subtitle 2</h3> <div> Subtext 2 </div> </div> <div> <h3>Subtitle 3</h3> <div> Subtext 3 </div> </div> </div> </div> </div> <div> <h3>Title 2</h3> <div> Text 2 </div> </div> <div> <h3>Title 3</h3> <div> Text 3 </div> </div> </div>
Example CSS
div.jkit-accordion > ul {
width: 100%;
}
div.jkit-accordion > ul, div.jkit-accordion > ul > li {
list-style: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}
div.jkit-accordion > ul > li {
margin: 0px;
padding: 0px;
margin-bottom: 1px;
color: #333;
}
div.jkit-accordion > ul > li > h3 {
background: #333;
color: #ccc;
margin: 0px;
padding: 12px;
padding-top: 8px;
padding-bottom: 6px;
cursor: pointer;
cursor: hand;
}
div.jkit-accordion > ul > li h3.active, div.jkit-accordion > ul > li h3:hover {
background: #E01B49;
color: #fff;
}
div.jkit-accordion > ul > li > div {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 12px;
background: #fff;
}
Replacements
There are currently no replacements for this command.
[ Learn more about replacements ]
Discussions
Do you have questions or do you want to suggest new features? Than head over to our new community:
[ jKit Community ]