アコーディオンの開閉について

Question

CSSを使ってアコーディオンの開閉を行いたい。

ここに質問の内容を詳しく書いてください。
▼こちらのサイトで紹介されている
https://qiita.com/dangoya/items/2411c38a14bc84294f79
コードをコピーして開閉できるアコーディオンを設置したいのですが、

【1】
【2】
【3】

と添付画像のようにコンテンツを縦に並べると
【続きを読む】のどこのボタンを押しても【1】の箇所が開閉してしまいます。

どうしたら解決するのかお分かりになる方はいらっしゃいますでしょうか。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード
【html】
<div class="accordion-box">
  <input id="ac00" type="checkbox">
  <label for="ac00"></label>
  <div class="accordion-container">
    <h3>タイトル</h3>
    <p>世界中どこを探してもなかったので作りました。</p>
    <p>jsを使っていないのでコンフリクトすることはありません。</p>
    <p>スマホにも対応。iPhone4くらいの小さい画面でも大丈夫です。</p>
    <p>閉じるボタンは要らないときは「.accordion-box input:checked + label」のdisplay:noneを有効にしてください。</p>
  </div><!— accordion-container -->
</div><!— accordion-box -->

【CSS】
.accordion-box {
    position: relative;
}
.accordion-box label {
    height: 140px; /* グラデーションの高さ */
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    position: absolute;
    bottom: 0;
    width: 100%;

    /* 以下グラデーションは「背景が白」に併せて設定しています */ 
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
}
.accordion-box input:checked + label {
    background: inherit; /* 開いた時には背景グラデーションを消す */
}
.accordion-box label:after {
    content: "続きをよむ"; /* ラベルの文字 */
    letter-spacing: .05em;
    line-height: 2.5rem;
    position: absolute;
    bottom: 20px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    color: #fff;
    background-color: #000;
    width: 18.75rem;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.accordion-box label:before {
    content: "↓";
    font-weight: 700;
    position: absolute;
    bottom: 30px;
    left: 50%;
    -webkit-transform: translate(-140px, 0);
    transform: translate(-140px, 0);
    background-color: #fff;
    z-index: 1;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    line-height: 20px;
}
.accordion-box input {
    display: none;
}
.accordion-box .accordion-container {
    overflow: hidden;
    height: 200px; /* 開く前に見えている部分の高さ */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}


.accordion-box input:checked + label {
    /* display: none ; 閉じるボタンは要らないとき */
}
.accordion-box input:checked + label:after {
    content: "閉じる";
}
.accordion-box input:checked + label:before {
    content: "↑";
}
.accordion-box input:checked ~ .accordion-container {
    height: auto;
    padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

ご提示のコードですと、アコーディオンが複数あるように見えませんでした。
『どこのボタンを押しても【1】の箇所が開閉してしまい』という問題は、実際にこのコードで起きていますか？

[meeee]

ご回答くださり、ありがとうございます。

参考にしているサイトでは、一つしか設置していないのですが
使用する場合は、上記の【1】、【.2】、【3】のようにコンテンツを縦に設置して使いたいです。
コード自体で何かを変えた方が良いのでしょうか。

CSSがよくわからず、初歩的な質問で申し訳ありません > <

[Lhankor_Mhy]

いえ、問題が起きているコードを見ないと、問題の原因はわからないのです。
なので、「参考にしているサイトのコード」ではなくて、「質問者が実際に動かしているコード」をご提示ください。

[meeee]

Lhankor_Mhyさま
ご回答くださった方の方法で、改めてコードを書き直したところ解決いたしました。
本日始めたばかりで、質問の仕方自体きちんとできずすみません。

敏速にご返答くださり、助かりました。
本当にありがとうございました！！

[Lhankor_Mhy]

ご解決されて何よりです。

Answer 1

おそらく同じ label を何度も置いているのかと思います。
直前の input を指すようにしてください。

  <input id="ac01" type="checkbox">
  <label for="ac01"></label>

Comments

[meeee]

ありがとうございます！！
解決しました（：o：）
同じIDで指定していることで、同じ場所開いてしまっていたのですね。

本当に初歩的なことにも関わらず、ご回答くださりありがとうございます。