三种不同样式的打开折叠内容,包括同时折叠多个

三种不同样式的打开折叠内容,包括同时折叠多个

演示

• 
  
  

 

XML/HTML Code

1. <div id="wrapper">  
2.   
3.         <main class="main-wrapper">  
4.   
5.             <h2>1.默认设置必须展开一个项目</h2>  
6.             <div id="first">  
7.                 <h3>Accordion One</h3>  
8.                 <div>  
9.   
10.   
11.                     <p>test3</p>  
12.   
13.                     <p>test4</p>  
14.   
15.                     <p>test5</p>  
16.                 </div>  
17.   
18.                 <h3>Accordion Two</h3>  
19.                 <div>  
20.   
21.   
22.                     <p>test3</p>  
23.   
24.                     <p>test4</p>  
25.   
26.                     <p>test5</p>  
27.                 </div>  
28.   
29.                 <h3>Accordion Three</h3>  
30.                 <div>  
31.   
32.   
33.                     <p>test3</p>  
34.   
35.                     <p>test4</p>  
36.   
37.                     <p>test5</p>  
38.                 </div>  
39.   
40.                 <h3>Accordion Four</h3>  
41.                 <div>  
42.   
43.   
44.                     <p>test3</p>  
45.   
46.                     <p>test4</p>  
47.   
48.                     <p>test5</p>  
49.                 </div>  
50.   
51.                 <h3>Accordion Five</h3>  
52.                 <div>  
53.   
54.   
55.                     <p>test3</p>  
56.   
57.                     <p>test4</p>  
58.   
59.                     <p>test5</p>  
60.                 </div>  
61.   
62.             </div><!-- end of first -->  
63.   
64.   
65.             <h2>2.同时展开多个项目</h2>  
66.   
67.             <div id="second">  
68.   
69.                 <h3>Accordion One</h3>  
70.                 <div>  
71.   
72.   
73.                     <p>test3</p>  
74.   
75.                     <p>test4</p>  
76.   
77.                     <p>test5</p>  
78.                 </div>  
79.   
80.                 <h3>Accordion Two</h3>  
81.                 <div>  
82.   
83.   
84.                     <p>test3</p>  
85.   
86.                     <p>test4</p>  
87.   
88.                     <p>test5</p>  
89.                 </div>  
90.   
91.                 <h3>Accordion Three</h3>  
92.                 <div>  
93.   
94.   
95.                     <p>test3</p>  
96.   
97.                     <p>test4</p>  
98.   
99.                     <p>test5</p>  
100.                 </div>  
101.   
102.                 <h3>Accordion Four</h3>  
103.                 <div>  
104.   
105.   
106.                     <p>test3</p>  
107.   
108.                     <p>test4</p>  
109.   
110.                     <p>test5</p>  
111.                 </div>  
112.   
113.                 <h3>Accordion Five</h3>  
114.                 <div>  
115.   
116.   
117.                     <p>test3</p>  
118.   
119.                     <p>test4</p>  
120.   
121.                     <p>test5</p>  
122.                 </div>  
123.   
124.             </div><!-- end of second -->  
125.   
126.             <h2>3.同时展开一个，但是可以全部关闭</h2>  
127.   
128.             <div id="thirth">  
129.                 <h3>Accordion One</h3>  
130.                 <div>  
131.   
132.   
133.                     <p>test3</p>  
134.   
135.                     <p>test4</p>  
136.   
137.                     <p>test5</p>  
138.                 </div>  
139.   
140.                 <h3>Accordion Two</h3>  
141.                 <div>  
142.   
143.   
144.                     <p>test3</p>  
145.   
146.                     <p>test4</p>  
147.   
148.                     <p>test5</p>  
149.                 </div>  
150.   
151.                 <h3>Accordion Three</h3>  
152.                 <div>  
153.   
154.   
155.                     <p>test3</p>  
156.   
157.                     <p>test4</p>  
158.   
159.                     <p>test5</p>  
160.                 </div>  
161.   
162.                 <h3>Accordion Four</h3>  
163.                 <div>  
164.   
165.   
166.                     <p>test3</p>  
167.   
168.                     <p>test4</p>  
169.   
170.                     <p>test5</p>  
171.                 </div>  
172.   
173.                 <h3>Accordion Five</h3>  
174.                 <div>  
175.   
176.   
177.                     <p>test3</p>  
178.   
179.                     <p>test4</p>  
180.   
181.                     <p>test5</p>  
182.                 </div>  
183.   
184.             </div><!-- end of thirth -->  
185.   
186.         </main><!-- end of main-wrapper -->  
187.   
188.   
189.     </div><!-- end of wrapper -->  

 

原文地址: http://www.freejs.net/article_jquerywenzi_172.html