CSS手风琴生成器

<style>.gaw-accordion {

    box-sizing: border-box;

    display: flex;

    font-family: Arial, Helvetica, sans-serif;

    overflow: hidden;

    width: 100%;

    border-color: #dedede;

    border-radius: 8px;

    border-style: solid;

    border-width: 1px;

    flex-direction: column;

    height: auto;

}

​

.gaw-accordion-title,

.gaw-accordion-select {

    background-color: #ffffff;

    color: #7f8787;

    width: 100%;

    height: 65px;

    font-size: 15px;

}

​

.gaw-accordion-select {

    cursor: pointer;

    margin: 0;

    opacity: 0;

    z-index: 1;

    margin-bottom: -65px;

    margin-right: -65px;

}

​

.gaw-accordion-title {

    position: relative;

}

​

.gaw-accordion-title:not(:nth-last-child(2))::after {

    border: 1px solid transparent;

    bottom: 0;

    content: "";

    left: 0;

    position: absolute;

    right: 0;

    top: 0;

    border-bottom-color: #eaeaea;

    border-right-color: transparent;

}

​

.gaw-accordion-title span {

    bottom: 0px;

    box-sizing: border-box;

    display: block;

    position: absolute;

    white-space: nowrap;

    width: 100%;

    transform: rotate(0deg);

    -ms-writing-mode: lr-tb;

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);

    padding-left: 32px;

    padding-right: 32px;

    line-height: 65px;

}

​

.gaw-accordion-content {

    box-sizing: border-box;

    overflow: auto;

    position: relative;

    transition: margin 0.3s ease 0.1s;

    background-color: #f7f7f7;

    color: #7f8787;

    height: 280px;

    margin-bottom: -280px;

    margin-right: 0;

    padding: 30px;

    width: 100%;

}

​

.gaw-accordion-select:checked+.gaw-accordion-title+.gaw-accordion-content {

    margin-bottom: 0;

    margin-right: 0;

}

​

.gaw-accordion-select:hover+.gaw-accordion-title,

.gaw-accordion-select:checked+.gaw-accordion-title {

    background-color: #ffffff;

}

</style>

<div style='margin: auto; width: 70%;'>

    <div class='gaw-accordion'><input type='radio' name='select' class='gaw-accordion-select' checked />

        <div class='gaw-accordion-title'><span>标题</span></div>

        <div class='gaw-accordion-content'>内容</div><input type='radio' name='select' class='gaw-accordion-select' />

        <div class='gaw-accordion-title'><span>标题</span></div>

        <div class='gaw-accordion-content'>内容</div><input type='radio' name='select' class='gaw-accordion-select' />

        <div class='gaw-accordion-title'><span>标题</span></div>

        <div class='gaw-accordion-content'>内容</div>

    </div>

</div>