使用 CSS Checkbox Hack 技术纯手工撸一个手风琴组件

<input type="radio" id="animal" name="wiki" value="Animal" checked>
<input type="radio" id="plant" name="wiki" value="Plant">
<input type="radio" id="space" name="wiki" value="Space">
<input type="radio" id="river" name="wiki" value="River">
<ul class="accordion">
    <li data-radio="animal">
        <label for="animal" class="accordion-title">
            <span>01</span>
            <span class="accordion-heading">Animal</span>
        </label>
        <div class="accordion-content">Animals are multicellular eukaryotic organisms that form thebiological kingdom Animalia. With few exceptions...</div>
    </li>
    <li data-radio="plant">
        <label for="plant" class="accordion-title">
            <span>02</span>
            <span class="accordion-heading">Plant</span>
        </label>
        <div class="accordion-content">MPlants are mainly multicellular,predominantly photosynthetic eukaryotes of the kingdom Plantae...</div>
    </li>
    <li data-radio="space">
        <label for="space" class="accordion-title">
            <span>03</span>
            <span class="accordion-heading">Space</span>
        </label>
        <div class="accordion-content">Space is the boundlessthree-dimensional extent in which objects and events haverelative position and direction. Physical space is often...</div>
    </li>
    <li data-radio="river">
        <label for="river" class="accordion-title">
            <span>04</span>
            <span class="accordion-heading">River</span>
        </label>
        <div class="accordion-content">A river is a natural flowingwatercourse, usually freshwater, flowing towards an ocean, sea,lake or another river. In some cases a river flows into the ground...</div>
    </li>
</ul>

:root {
    --accordion-color: #282828;
    --title-color: #191919;
    --active-color: #3e86d2;
    --separator-color: #292c2d;
    --white: #9b9b9b;
    --red: #e74c3c;
    --black: #000;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
label {
    cursor: pointer;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: inherit;
}
input[type="radio"] {
    position: absolute;
    left: -9999px;
}
body {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 50px 0;
    font: 1rem/1.5 'Muli', sans-serif;
}
/* ACCORDION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.accordion {
    position: relative;
    width: calc(100% - 20px);
    max-width: 800px;
    min-height: 380px;
    margin: 0 auto;
    background: var(--accordion-color);
    color: var(--white);
}
.accordion label {
    text-align: center;
}
.accordion,
.accordion li,
.accordion .accordion-title {
    display: flex;
}
.accordion li:not(:last-child) {
    border: 1px solid var(--separator-color);
}
.accordion .accordion-title {
    flex-direction: column;
    justify-content: space-between;
    width: 70px;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: normal;
    padding: 20px 10px;
    background: var(--title-color);
    transition: color 0.1s;
}
.accordion .accordion-title:hover {
    color: var(--active-color);
}
.accordion .accordion-heading {
    display: inline-block;
    white-space: nowrap;
    transform-origin: bottom;
    transform: rotate(-90deg) translate(50%, 50%);
}
.accordion .accordion-content {
    display: none;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 20px;
}
[value="Animal"]:checked ~ .accordion [data-radio="animal"],
[value="Plant"]:checked ~ .accordion [data-radio="plant"],
[value="Space"]:checked ~ .accordion [data-radio="space"],
[value="River"]:checked ~ .accordion [data-radio="river"] {
    flex-grow: 1;
}
[value="Animal"]:checked ~ .accordion [for="animal"] + .accordion-content,
[value="Plant"]:checked ~ .accordion [for="plant"] + .accordion-content,
[value="Space"]:checked ~ .accordion [for="space"] + .accordion-content,
[value="River"]:checked ~ .accordion [for="river"] + .accordion-content {
    display: flex;
}
[value="Animal"]:checked ~ .accordion [for="animal"],
[value="Plant"]:checked ~ .accordion [for="plant"],
[value="Space"]:checked ~ .accordion [for="space"],
[value="River"]:checked ~ .accordion [for="river"] {
    color: var(--active-color);
}
/*[value="Animal"]:focus ~ .accordion [for="animal"],
[value="Plant"]:focus ~ .accordion [for="plant"],
[value="Space"]:focus ~ .accordion [for="space"],
[value="River"]:focus ~ .accordion [for="river"] {
  outline: 1px solid var(--active-color);
}*/
/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 650px) {
    .accordion {
        min-height: 0;
    }
    .accordion,
    .accordion li {
        flex-direction: column;
    }
    .accordion .accordion-title {
        flex-direction: row;
        width: auto;
    }
    .accordion .accordion-heading {
        transform: none;
    }
    .accordion .accordion-title,
    .accordion .accordion-content {
        padding: 20px;
    }
}