纯CSS折叠面板

HTML

1. <!DOCTYPE html>
   
2. <html>
   
3. <head>
   
4. <title>Page Title</title>
   
5.   <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
   
6.   <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
   
7.   <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
   
8. </head>
   
9. <body>
   
10. 
    
11.   <section>
    
12.     <div class="container">
    
13.       <div class="accordion">
    
14.         <div class="accordion-item" id="question1">
    
15.           <a class="accordion-link" href="#question1">
    
16.             <div class="flex">
    
17.               <h3>BRANDING</h3>
    
18.               <ul>
    
19.                 <li>#Figma</li>
    
20.                 <li>#Sketch</li>
    
21.                 <li>#Adobe</li>
    
22.                 <li>#Invision</li>
    
23.                 <li>#Protopie</li>
    
24.               </ul>
    
25.             </div>
    
26.             <i class="icon ion-md-arrow-forward"></i>
    
27.             <i class="icon ion-md-arrow-down"></i>
    
28.           </a>
    
29.           <div class="answer">
    
30.             <p> We believe in the greater good, we strive to do something for people, we aim to make their lives easier and more enjoyable, we love businesses that keep this</p>
    
31.           </div>
    
32.           <hr>
    
33.       </div>
    
34.         <div class="accordion-item" id="question2">
    
35.           <a class="accordion-link" href="#question2">
    
36.             <div class="flex">
    
37.               <h3>UX/UI DESIGN</h3>
    
38.               <ul>
    
39.                 <li>#Figma</li>
    
40.                 <li>#Sketch</li>
    
41.                 <li>#Adobe</li>
    
42.                 <li>#Invision</li>
    
43.                 <li>#Protopie</li>
    
44.               </ul>
    
45.             </div>
    
46.             <i class="icon ion-md-arrow-forward"></i>
    
47.             <i class="icon ion-md-arrow-down"></i>
    
48.           </a>
    
49.           <div class="answer">
    
50.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
    
51.           </div>
    
52.           <hr>
    
53.       </div>
    
54.         <div class="accordion-item" id="question3">
    
55.           <a class="accordion-link" href="#question3">
    
56.             <div class="flex">
    
57.               <h3>FRONTEND DEVELOPMENT</h3>
    
58.               <ul>
    
59.                 <li>#Figma</li>
    
60.                 <li>#Sketch</li>
    
61.                 <li>#Adobe</li>
    
62.                 <li>#Invision</li>
    
63.                 <li>#Protopie</li>
    
64.               </ul>
    
65.             </div>
    
66.             <i class="icon ion-md-arrow-forward"></i>
    
67.             <i class="icon ion-md-arrow-down"></i>
    
68.           </a>
    
69.           <div class="answer">
    
70.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
    
71.           </div>
    
72.           <hr>
    
73.       </div>
    
74.         <div class="accordion-item" id="question4">
    
75.           <a class="accordion-link" href="#question4">
    
76.             <div>
    
77.               <h3>BACKEND DEVELOPMENT</h3>
    
78.               <ul>
    
79.                 <li>#Figma</li>
    
80.                 <li>#Sketch</li>
    
81.                 <li>#Adobe</li>
    
82.                 <li>#Invision</li>
    
83.                 <li>#Protopie</li>
    
84.               </ul>
    
85.             </div>
    
86.             <i class="icon ion-md-arrow-forward"></i>
    
87.             <i class="icon ion-md-arrow-down"></i>
    
88.           </a>
    
89.           <div class="answer">
    
90.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
    
91.           </div>
    
92.           <hr>
    
93.       </div>
    
94.      </div>
    
95.     </div>
    
96.   </section>
    
97. 
    
98. </body>
    
99. </html>

复制代码