###前提・実現したいこと
Wordpressの固定ページ内で以下のように表示させたい。
###発生している問題・エラーメッセージ
<label for="label1">MORE</label>の部分をチェックしても中身のコンテンツが表示されません。 SafariとChromeのブラウザで試しましたがどちらもダメです。 しかし、ローカルであれば動作の問題はありませんでした。
###該当のソースコード
【HTML】 <body> <div class="accbox"> <!--ラベル1--> <label for="label1">MORE</label> <input type="checkbox" id="label1" class="cssacc" /> <div class="accshow"> <!--ここに隠す中身--> <div class="inner"> <div class="ytb"> <iframe src="https://www.youtube.com/embed/zBLBJtFPC-w" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div> <div class="conts2"> <div class="title">名前*駅名<br>Natsumi Ota*Shioya Station</div> <div class="text">動画の説明やスポットの説明を入れる。動画の説明やスポットの説明を入れる。動画の説明やスポットの説明を入れる。</div> <button class="btn btn--stripe"> <a href="#">MORE</a> </button> </div> </div> </div> <!--//ラベル1--> </div> </body> =============================================== 【CSS】 /*ボックス全体*/ .accbox { margin: 0 auto; padding: 0; max-width: 100%;/*最大幅*/ } /*ラベル*/ .accbox label { display: block; margin: 1.5px 0; padding : 13px 12px; color: #ffba47; font-weight: bold; background: #fff2cc; cursor :pointer; transition: all 0.5s; text-align: center; } /*ラベルホバー時*/ .accbox label:hover { background :#ffe9a9;} /*チェックは隠す*/ .accbox input { display: none;} /*中身を非表示にしておく*/ .accbox .accshow { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s; } /*クリックで中身表示*/ .cssacc:checked + .accshow { height: auto; padding: 5px; background: #fff; opacity: 1; } .accbox .accshow p { margin: 15px 10px}
###試したこと
↓非表示に設定している部分↓
.accbox .accshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
を手動で「height: auto;」と「opacity: 1;」に変更すると表示されました。
知識不足でどうすれば良いのやら。。。という状況です。
どなたかお力を貸していただけると幸いです。
よろしくお願いいたします。
###補足情報(言語/FW/ツール等のバージョンなど)
◆ https://saruwakakun.com/html-css/reference/accordion
のチュートリアルを参考に上記のソースコードを作成しました。
◆ 使用しているWPのテーマは http://design-plus1.com/tcd-w/tcd037 です。
情報不足な点があればコメントください。
回答2件
あなたの回答
tips
プレビュー