Sample code for implementing mobile expansion and collapse effects with pure CSS3

<section class="block">
    <input type="checkbox">
    <div class="case-block">
      <div>Expand</div>
      <div>Collapse</div>
    </div>
    <div class="detail">
      <div>Jijiji, Jijiji, Mulan weaves by the window. I hear no sound of the loom, only your sigh. (Wei Wentong: Wei) Ask you what you are thinking about, ask you what you are remembering. I have nothing to think about, and nothing to remember. I saw a military order last night. The Khan was recruiting soldiers. There were twelve volumes of military books, and my name was in every volume. My father has no eldest son, and Mulan has no older brother. I am willing to buy a horse and saddle, and from now on fight for my father. (Only heard: only)
      <div>Go to the East Market to buy a fine horse, go to the West Market to buy a saddle, go to the South Market to buy a bridle, and go to the North Market to buy a long whip. I left my parents in the morning and stayed by the Yellow River in the evening. I did not hear my parents calling me, but only heard the sound of the Yellow River flowing. I left the Yellow River in the morning and arrived at the Black Mountain in the evening. I did not hear the voices of my parents calling me, but only the cries of the Hu cavalry from Yanshan. </div>
      <div>Travel thousands of miles to the battlefield, crossing the mountains and hills like flying. The cold air spreads through the golden watchtowers, and the cold light shines on the iron armor. The general died in a hundred battles, and the warrior returned after ten years. </div>
      <div>When he returned, he met the emperor, who sat in the Mingtang. Twelve promotions for meritorious service and rewards of hundreds of thousands. The Khan asked what she wanted. Mulan did not want to be a minister, but wanted to ride a thousand miles to send her son back to his hometown. (Another version: I wish to borrow the thousand-mile feet of a bright camel)</div>
      <div>When parents heard their daughter was coming, they went out of the city to help her; when elder sister heard her younger sister was coming, she got ready to put on her makeup; when younger brother heard his elder sister was coming, he sharpened his knife to kill pigs and sheep. Open the door of my east pavilion, sit on my west pavilion bed, take off my wartime robe, and put on my old clothes. Combing her hair by the window, applying makeup in front of the mirror. When she went out to see her companions, they were all surprised and said: We have been together for twelve years, but they didn't know Mulan was a girl. (贴通：贴; 惊忙 also written as 惶; 惶火伴通： 伙)</div>
     <div>The male rabbit's feet are confused, the female rabbit's eyes are blurred; two rabbits are walking side by side, how can I tell which is male and which is female? </div>
    </div>
  </section>

@charset "UTF-8";

.title-block {
    height: 26px;
    text-align: center;
}

.block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-flow:column-reverse nowrap;
    flex-flow: column-reverse nowrap;
    width: 360px;
    margin: 0 auto;
    font-size: 14px;
    color: #4C4C4C;
    line-height: 28px;
    border: 1px solid #999;
    padding: 10px;
}

.block > .detail {
    max-height: 163px;
    margin-bottom: 10px;
    overflow: hidden;
}

.block > .case-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 120px;
    height: 24px;
    margin: 0 auto 0;
    color: #0e0e0e;
    background: #fff;
    border: 1px solid #0e0e0e;
    border-radius: 5px;
}

.block > .case-block div:nth-of-type(1) {
    display: block;
}

.block > .case-block div:nth-of-type(2) {
    display: none;
}

.block > [type="checkbox"] {
    position: relative;
    display: block;
    width: 120px;
    height: 24px;
    margin: -24px auto 0;
    z-index: 1000;
    opacity: 0;
}

.block > [type="checkbox"]:hover + .case-block {
    background-color: #f5f5f5;
}

.block > [type="checkbox"]:checked + .case-block div:nth-of-type(1) {
    display: none;
}

.block > [type="checkbox"]:checked + .case-block div:nth-of-type(2) {
    display: block;
}

.block > [type="checkbox"]:checked + .case-block + .detail {
    max-height: inherit;
}