アコーディオンパネル（開閉式コンテンツ）の中身のボックスをblockquoteにしたい

Question

https://anicomil.com/2020/08/06/anime-ranking-top50/

上記URLのページにて、「あらすじを開く」という開閉式コンテンツの中身を、blockquoteで囲みたいと考えています。
そこで現在のコードのdiv部分を全てblockquoteに書き換えてみたのですが、それだと開閉式コンテンツが動作せず、最初から中身が見えた状態になってしまいました。（下記画像参照。現在は元に戻してあります。）

どのようにコードを書き換えれば、blockquoteでアコーディオンパネルを正常に動作させることが出来ますでしょうか？
お分かりの方がいらっしゃいましたら、ご回答お願い致します。

▼現在のコード

<div class="ac-box"><input id="ac-50" name="accordion-1" type="checkbox" />
<label for="ac-50"> あらすじを開く </label>
<div class="ac-small">

高校3年生の冬、泉瑛太は父親の都合で4年ぶりに神奈川に帰ってくることになる。

転校先で過ごす期間は、ほんの数ヶ月。このまま俺の高校生活はなんとなく終わるんだろうな...

そう思っていた瑛太の前に現れたのは、中学時代の親友相馬陽斗と夏目美緒。

&nbsp;

くすぶった想いを抱えた3人の冬は今、始まったー

</div>
</div>

.ac-box{
width: auto;
margin: 30px auto 5px;
}

.ac-box label{
max-width: 385px;
font-size: 16px;
font-weight: bold;
text-align: center;
background: #ff8484;
margin: auto;
line-height: 50px;
position: relative;
display: block;
height: 50px;
border-radius: 8px;
cursor: pointer;
color: #fff;
transition: all 0.5s;
}

.ac-box label:hover{
background: rgba( 240, 86, 137, 0.55 );
-webkit-transition: all .3s;
transition: all .3s;
}

.ac-box input{
display: none;
}

.ac-box label:after{
color: #fff;
font-family:"FontAwesome";
content:" \f078";
}

.ac-box input:checked ~ label::after {
color: #fff;
font-family:"FontAwesome";
content:" \f077";
}

.ac-box div{
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.2s;
}

.ac-box input:checked ~ div{
height: auto;
padding: 10px;
background: #eaeaea;
opacity: 1;
}

.ac-box div p{
color: #000000;
line-height: 23px;
font-size: 14px;
padding: 10px;
text-align: justify;
}
.ac-small p{
margin-bottom: 0px;
}

Comments

[kuma_kuma_]

inputにもスタイルが設定されています。
それを追加して下さい。

[marimokkori0724]

inputは元からテーマ側に用意されているもので、私は全くいじっていないので恐らく関係無いと思われます。また、inputのスタイルがあったとしても、どこに記載されているかが分かりません。（検索を活用しても、inputが複数記載されており、どの部分が問題に関係しているものなのか、私には判別できません。）
私の知識不足で、申し訳ございません。

私としましては、divとblockquoteの2パターン（普通のグレーボックスと引用符が付いたボックス）で使用したいと考えています。
この場合はどのようにHTML・CSSを書き換えれば良いかお分かりになりますでしょうか？

[kuma_kuma_]

解決済みだけど書いておきます
<input id="ac-50" ...
ここで開閉の制御を行っていてチェックボックスなのにCSSでボタンのように見せています。
このチェックボックスのclickでスタイルを変更していたのが
他の方が回答された
.ac-box input:checked ...
部分となります。

Answer 1

未検証だけどdiv書き換えずにblockquote直下に入れればいいんじゃないの？

<div class="ac-small">
<blockquote>
高校3年生の冬、泉瑛太は父親の都合で4年ぶりに神奈川に帰ってくることになる。

転校先で過ごす期間は、ほんの数ヶ月。このまま俺の高校生活はなんとなく終わるんだろうな...

そう思っていた瑛太の前に現れたのは、中学時代の親友相馬陽斗と夏目美緒。

&nbsp;

くすぶった想いを抱えた3人の冬は今、始まったー
</blockquote>
</div>

Comments

[marimokkori0724]

そちらですと、追加した画像のように、もとから指定しているスタイルが被ってしまって、うまく表示できません。

私といたしましては、divとblockquoteの2パターン（普通のグレーボックスと引用符が付いたボックス）で使用したいと考えています。
この場合はどのようにHTML・CSSを書き換えれば良いのでしょうか？

もしかすると簡単な話なのかもしれませんが、私の知識が至らないゆえに...申し訳ありません。もう少しお付き合い頂けますと幸いです。

[sousuke]

うまく表示できませんではだれにも何も伝わりません。

提示されているhtmlとページのコードを見比べてもpタグがなかったりと差異があります。

[marimokkori0724]

ご不快な思いをさせてしまい、申し訳ありませんでした。
無事問題が解決致しましたので、ご報告させて頂きます。
この度はご回答、ありがとうございました。

Answer 2

.ac-box div{
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.2s;
}

.ac-box input:checked ~ div{
height: auto;
padding: 10px;
background: #eaeaea;
opacity: 1;
}

この部分が開閉に使用している要素ですね。
せっかくクラス指定しているので要素を変更しても動くようにクラス名で指定したほうがいいような気がします。

追記

.ac-box .ac-small{
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.2s;
}

.ac-box input:checked ~ .ac-small{
height: auto;
padding: 10px;
background: #eaeaea;
opacity: 1;
}

要素がdivでもblockquoteでも.ac-smallが付いていれば開閉されます。
書いておいてなんですけど.ac-smallってクラス名からして他の用途がありそうな気がしてきました。
その場合は上記CSSの.ac-smallの部分はblockquoteに変更してください。

再追記

サイトを確認しにいったところ
.post blockquote にあるスタイルが上記CSSで打ち消されて想定通りに動かないように見えますね。
上記CSSを戻して以下のCSSを追加してみてください。

.ac-box blockquote{
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.2s;
}

.ac-box input:checked ~ blockquote{
height: auto;
padding: 50px 20px 20px 20px;
opacity: 1;
}

Comments

[marimokkori0724]

お恥ずかしい話ですが、私はプログラミングに関しての知識がほとんどありませんので、回答者様のご回答が理解できません。（このコードも、検索してコピペしたものです。）
クラスというのはdivやblockquoteのことですよね？
自分なりに色々と奮闘してみたのですが、結局解決には至りませんでした。

自分としてもdivとblockquoteの2パターンで使用したいので、具体的なCSS・HTMLのコードをご記載頂けませんでしょうか？
自分が至らないせいでお手を煩わせてしまって本当に申し訳ございません。

[marimokkori0724]

ありがとうございます！
今まさに質問させて頂こうと思っていた、文字と引用符の被りについても、回答者様の追記にて解決致しました！！
また、回答者様にご指摘頂いた箇所をdivで書いたパターンとblockquoteで書いた2パターンを用意することで、無事両方使えるようになりました。これでまたバリバリと記事を書けます。本当にありがとうございました(*´ω｀)