This time I will share jQuery Plugin and tutorial about Multi-level Accordion / Content Toggle Plugin – expandcollapse.js, hope it will help you in programming stack.
| File Size: | 7.03 KB |
|---|---|
| Views Total: | 4032 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
expandcollapse.js is a jQuery accordion plugin which allows to expand / collapse multi-level content panes by clicking on the header toggles.
How to use it:
1. Include the style sheet expandcollapse.css in the document’s head section.
1 |
<link rel="stylesheet" href="css/expandcollapse.css"> |
2. Create a nested html list for the accordion.
01 |
<ul class="accordion"> |
02 |
<li> |
03 |
<a id="top" class="toggle" href="javascript:void(0);">Level 1 A</a> |
04 |
<ul class="inner"> |
05 |
<li> |
06 |
<a href="#" class="toggle">Level 2</a> |
07 |
<ul class="inner"> |
08 |
<li> |
09 |
<a href="#" class="toggle">Level 3</a> |
10 |
<ul class="inner"> |
11 |
<li> |
12 |
<a href="#">Level 4</a> |
13 |
</li> |
14 |
</ul> |
15 |
<a href="#" class="toggle">Level 3</a> |
16 |
<ul class="inner"> |
17 |
<li> |
18 |
<a href="#">Level 4</a> |
19 |
</li> |
20 |
</ul> |
21 |
<a href="#" class="toggle">Level 3</a> |
22 |
<ul class="inner"> |
23 |
<li> |
24 |
<a href="#">Level 4</a> |
25 |
</li> |
26 |
</ul> |
27 |
</li> |
28 |
</ul> |
29 |
</li> |
30 |
</ul> |
31 |
</li> |
32 |
<li> |
33 |
<a class="toggle" href="javascript:void(0);">Level 1 B</a> |
34 |
<ul class="inner"> |
35 |
<li> |
36 |
<a href="#" class="toggle">Level 2</a> |
37 |
<ul class="inner"> |
38 |
<li> |
39 |
<a href="#" class="toggle">Level 3</a> |
40 |
<ul class="inner"> |
41 |
<li> |
42 |
<a href="#">Level 4</a> |
43 |
</li> |
44 |
</ul> |
45 |
</li> |
46 |
</ul> |
47 |
</li> |
48 |
</ul> |
49 |
</li> |
50 |
<li> |
51 |
<a class="toggle" href="javascript:void(0);">Level 1 C</a> |
52 |
<ul class="inner"> |
53 |
<li> |
54 |
<a href="#" class="toggle">Level 2</a> |
55 |
<ul class="inner"> |
56 |
<li> |
57 |
<a href="#" class="toggle">Level 3</a> |
58 |
<ul class="inner"> |
59 |
<li> |
60 |
<a href="#">Level 4</a> |
