アコーディオンボックスの使用方法について

  • P

    以下のページでソースコードの表示の際に使用している
    アコーディオンボックスを使用したいと考えております。
    http://hituji-affiliate.com/app-reach/

    上記ページの要素検証を行い
    同じようにHTLMを投稿ページに記述し
    プレビューにて確認したのですが
    アコーディオンボックスが表示されず
    チェックボックスと文字列がただ羅列される状態になります。

    上記ページでは、何かプラグインを使用しているのでしょうか。
    もしくは、何かCSSの追記をする必要があるのでしょうか。

    マニュアル確認済み
    キャッシュクリア済み
    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :

    0

  • こんにちは！

    同じ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;
}
    0
    P
     1 件の返信
  • P

    @ひつじ
    いただいた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の追記も必要でしょうか。

    0 1 件の返信

  • @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;
    }

    0