自适应手风琴折叠效果代码-html代码-BFW代码库

代码语言：html

代码描述：通过css和js的配合实现了一个自适应手风琴折叠效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--=============== BOXICONS ===============-->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/boxicons.css">

    <!--=============== CSS ===============-->
    <style>
        /*=============== GOOGLE FONTS ===============*/
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
    /*=============== VARIABLES CSS ===============*/
    :root {
      /*========== Colors ==========*/
      --hue-color: 225;
      --first-color: hsl(var(--hue-color), 48%, 35%);
      --title-color: hsl(var(--hue-color), 48%, 22%);
      --text-color: hsl(var(--hue-color), 12%, 35%);
      --body-color: hsl(var(--hue-color), 49%, 98%);
      --container-color: #FFF;
      /*========== Font and typography ==========*/
      --body-font: 'Poppins', sans-serif;
      --normal-font-size: .938rem;
      --small-font-size: .813rem;
      --smaller-font-size: .75rem;
    }
    
    @media screen and (min-width: 968px) {
      :root {
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
      }
    }
    
    /*=============== BASE ===============*/
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    
    body {
      font-family: var(--body-font);
      font-size: var(--normal-font-size);
      background-color: var(--body-color);
      color: var(--text-color);
    }
    
    /*=============== LAYOUT ===============*/
    .container {
      max-width: 968px;
      margin-left: 1rem;
      margin-right: 1rem;
      background-color: #fafafa;
    }
    
    /*=============== ACCORDION ===============*/
    .accordion {
      display: grid;
      align-content: center;
      height: auto;
    }
    
    .accordion__container {
      display: grid;
      row-gap: .75rem;
      padding: 2rem 1rem;
      background-color: var(--container-color);
      border-radius: .5rem;
      box-shadow: 0 12px 32px rgba(51, 51, 51, 0.1);
    }
    
    .accordion__title {
      font-size: var(--small-font-size);
      color: var(--title-color);
      font-weight: 400;
      margin-top: .15rem;
      transition: .2s;
    }
    
    .accordion__header {
      display: flex;
      column-gap: .5rem;
      padding: 1.25rem 1.25rem 1.25rem 1rem;
      cursor: pointer;
    }
    
    .accordion__description {
      padding: 0 1.25rem 1.25rem 3rem;
      font-size: var(--smaller-font-size);
    }
    
    .accordion__icon {
      font-size: 1.5rem;
      height: max-content;
      color: var(--title-color);
      transition: .3s;
    }
    
    .accordion__item {
      box-shadow: 0 2px 6px rgba(38, 38, 38, 0.1);
      background-color: var(--container-color);
      border-radius: .25rem;
      position: relative;
      transition: all .25s ease;
    }
    
    .accordion__item::after {
      content: '';
      background-color: var(--first-color);
      width: 5px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: .25rem 0 0 .25rem;
    }
    
    .accordion__item:nth-child(1) {
      background-color: #fff7f0;
    }
    
    .accordion__item:nth-child(1)::after {
      background-color: #ffc08a;
    }
    
    .accordion__item:nth-child(2) {
      background-color: #f0f0ff;
    }
    
    .accordion__item:nth-child(2)::after {
      background-color: #8a8aff;
    }
    
    .accordion__item:nth-child(3) {
      background-color: #fff0f3;
    }
    
    .accordion__item:nth-child(3)::after {
      background-color: #ff8aa1;
    }
    
    .accordion__item:nth-child(4) {
      background-color: #f0faff;
    }
    
    .accordion__item:nth-child(4)::after {
      background-color: #8ad8ff;
    }
    
    .accordion__content {
      overflow: hidden;
      height: 0;
      transition: all .25s ease;
    }
    
    /*Rotate icon and add font weight to titles*/
    .accordion-open .accordion__icon {
      transform: rotate(45deg);
    }
    
    .accordion-open .accordion__title {
      font-weight: 600;
    }
    
    /*=============== MEDIA QUERIES ===============*/
    /* For medium devices */
    @media screen and (min-width: 576px) {
      .accordion__container {
        width: 550px;
        padding: 2.5rem;
        justify-self: center;
        border-radius: .75rem;
      }
      .accordion__header {
        padding: 1.5rem;
      }
      .accordion__title {
        padding-right: 3.5rem;
      }
      .accordion__description {
        padding: 0 4rem 1.25rem 3.5rem;
      }
    }
    
    /* For large devices *.........完整代码请登录后点击上方下载按钮下载查看