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: 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>.........完整代码请登录后点击上方下载按钮下载查看