js+css实现手风琴式faq可折叠面板效果代码-html代码-BFW代码库

js+css实现手风琴式faq可折叠面板效果代码

代码语言：html

代码描述：js+css实现手风琴式faq可折叠面板效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion FAQ</title>
    <style>
        :root {
          --white: #FFF;
          --background: #060D23;
          --background-hover: #383D4F;
          --primary-blue: #00E0FE;
          --blue-gray: #f4fcff;
        }
        
        html {
          font-size: 16px;
          font-family: "Mulish", sans-serif;
        }
        
        body {
          height: 100%;
          background-color: var(--blue-gray);
        }
        
        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        
        .faq-container {
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          gap: 1rem;
          margin-top: 12rem;
          max-width: 37.5rem;
          padding: 2rem;
          border-radius: 1em;
          background-color: var(--background);
        }
        
        details {
          font-size: 1rem;
          margin: 0 auto;
          width: 100%;
          border-radius: 0.5rem;
          position: relative;
          max-width: 37.5rem;
          transition: all 0.3s ease-in-out;
        }
        
        details:hover {
          background-color: var(--background-hover);
        }
        
        details:hover svg {
          stroke: var(--primary-blue);
        }
        
        details[open] {
          background-color: var(--background-hover);
        }
        
        details[open] .faq-title {
          color: var(--primary-blue);
        }
        
        summary {
          user-select: none;
          cursor: pointer;
          font-weight: 600;
          display: flex;
          list-style: none;
          padding: 1rem;
          align-items: c.........完整代码请登录后点击上方下载按钮下载查看