CSSのみでアコーディオンを実装する方法を紹介！

<div class="accordion">
        <div class="option">
            <input type="checkbox" id="toggle1" class="toggle">
            <label class="title" for="toggle1">日本国憲法</label>
            <div class="content">
                <p>日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこ...</p>
            </div>
        </div>
        <div class="option">
            <input type="checkbox" id="toggle2" class="toggle">
            <label class="title" for="toggle2">夜明け前</label>
            <div class="content">
                <p>木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も...</p>
            </div>
        </div>
        <div class="option">
            <input type="checkbox" id="toggle3" class="toggle">
            <label class="title" for="toggle3">吾輩は猫である</label>
            <div class="content">
                <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてス...</p>
            </div>
        </div>
    </div>

<div class="accordion">
 <div class="option">
  <input type="checkbox" id="toggle1" class="toggle">
   <label class="title" for="toggle1">日本国憲法</label>
    <div class="content">
     <p>日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこ...</p>
    </div>
 </div>
        
 <div class="option">
  <input type="checkbox" id="toggle2" class="toggle">
   <label class="title" for="toggle2">夜明け前</label>
    <div class="content">
     <p>木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も...</p>
    </div>
 </div>
        
 <div class="option">
  <input type="checkbox" id="toggle3" class="toggle">
   <label class="title" for="toggle3">吾輩は猫である</label>
    <div class="content">
     <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてス...</p>
    </div>
 </div>
</div>

/*アコーディオン全体/*
.accordion {
    margin: 3em auto;
    max-width: 60vw;
}

/*チェックボックスを非表示*/
.toggle {
    display: none;
}

/*ボックス全体の装飾*/
.option {
    position: relative;
    margin-bottom: 1em;
}

.title, .content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;
}

.title {
    border: solid 1px #ccc;
    padding: 1em;
    display: block;
    color: #333;
    font-weight: bold;
}

/*右側のマーク*/
.title::after,
.title::before {
    content: "";
    position: absolute;
    right: 1.25em;
    top: 1.25em;
    width: 2px;
    height: 0.75em;
    background-color: #999;
    transition: all 0.3s;
}

/*右側のマーク*/
.title::after {
    transform: rotate(90deg);
}

/*文章を非表示にする*/
.content {
    max-height: 0;
    overflow: hidden;
}

/*文章の装飾*/
.content p {
    margin: 0;
    padding: 0.5em 1em 1em;
    font-size: 0.9em;
    line-height: 1.5;
}

/*クリックすると要素が開く*/
.toggle:checked + .title + .content {
    max-height: 500px;
    transition: all 1.5s;
}
.toggle:checked + .title::before {
    transform: rotate(90deg) !important;
}