アコーディオンボックスの使用方法について
-
以下のページでソースコードの表示の際に使用している
アコーディオンボックスを使用したいと考えております。
http://hituji-affiliate.com/app-reach/上記ページの要素検証を行い
同じようにHTLMを投稿ページに記述し
プレビューにて確認したのですが
アコーディオンボックスが表示されず
チェックボックスと文字列がただ羅列される状態になります。上記ページでは、何かプラグインを使用しているのでしょうか。
もしくは、何かCSSの追記をする必要があるのでしょうか。
マニュアル確認済み
キャッシュクリア済み
WordPressのバージョン :
ご利用のサーバー名 :
PHPのバージョン :
OS :
ご利用のブラウザ :
該当サイトのURL :
-
こんにちは!
同じHTMLであればこちらのCSSを利用すれば適用されるのではないかと思います。
.pre-box{ background:#f7f7f7; border:3px solid #44ADA6; border-radius:3px; } .pre-title{ color:#fff; background:#44ADA6; text-align:center; padding:10px; font-weight:bold; }
-
@ひつじ
いただいたCSSを追記して表示させてみたのですが
以下のような表示になり、表示/非表示の切り替えができない状態です。
https://gyazo.com/b5359a4607481735c2ab4a2f5c62b5ac記載したHTMLは、以下になります。
ーーーここからーーー
<a href="https://usagi-online.com/">USAGI ONLINE</a>
<div class="pre-box">
<div class="pre-title">
↓ 以下のCSSをコピペ ↓</div>
<div class="hidden_box">
<label for="label2">クリックして表示</label>
<input type="checkbox" id="label2">
<div class="hidden_show">
<pre>中身を表示
</pre>
</div>
</div>
</div>
ーーーここまでーーーCSSの他にJavaScriptの追記も必要でしょうか。
-
@ponpopon もう解決済みかも知れませんが、参考にさせていただいたので記載します。
ソース拝見しましたが、以下もCSSに必要なようです。/非表示切り替えボタン/
.hidden_box {
padding: 0;
}
.hidden_box label {
display:block;
padding:35px 15px 10px;
font-weight: bold;
text-align:center !important;
cursor :pointer;
}.hidden_box label:before{
display: inline-block;
font-family:FontAwesome;
content:"\f055";
font-weight: 900;
margin-right: 6px;
color:#043d78;
font-size: 1.2rem;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: initial;
transition-property: all;
}.hidden_box input {
display: none;
}
.hidden_box .hidden_show {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
.hidden_box input:checked ~ .hidden_show {
padding: 10px 0;
height: auto;
opacity: 1;
}