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

代码语言：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: center;
        }
        
        summary svg {
          stroke: var(--white);
        }
        
        details[open] summary svg {
          stroke: var(--primary-blue);
          transform: rotate(90deg);
        }
        
        summary:hover .faq-title {
          color: var(--primary-blue);
        }
        
        summary::-webkit-details-marker {
          display: none;
        }
        
        summary:focus {
          outline: none;
        }
        
        .faq-title {
          color: var(--white);
          width: 90%;
          transition: all 250ms ease-in-out;
        }
        
        .faq-content {
          color: var(--white);
          padding: 0.2rem 1rem 1rem 1rem;
          font-weight: 300;
          line-height: 1.5;
        }
        
        .expand-icon {
          pointer-events: none;
          position: absolute;
          right: 1rem;
          transition: all 150ms ease-out;
        }
    </style>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Mulish&display=swap">
</head>

<body>
    <div class="faq-container">
        <details>
            <summary>
                <span class="faq-title">
          How long does the course take?
        </span>
                <svg xmlns="http://www.w3.org/2000/svg" class="expand-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M9 6l6 6l-6 6"></path>
        </svg>
            </summary>
            <div class="faq-content">
                The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.
            </div>
        </details>
        <details>
            <summary>
                <span class="faq-title">
          Who teaches courses on Atheros Learning?
        </span>
                <svg xmlns="http://www.w3.org/2000/svg" class="expand-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M9 6l6 6l-6 6"></path>
        </svg>
            </summary>
            <div class="faq-content">
                The authors of the courses are mostly Atheros team members, who worked on tens of digital solutions for big international companies, projects for small startups, and internal Atheros products. By solving the most sophisticated problems in the fields,
                they gained proper knowledge, which is now available for you. </div>
        </details>
        <details>
            <summary>
                <span class="faq-title">How is the course different from other UX/UI design courses?</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="expand-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round&qu.........完整代码请登录后点击上方下载按钮下载查看