カスタムを作成する2つの方法Diviでより多くのトグルを表示

より多くのトグルを表示すると、Webサイト上のさまざまなアプリケーションに役立ちます。 従来、[もっと見る]リンクをクリックすると、より多くのテキストを表示するために[もっと見る]トグルが使用されていました（もっと読むトグルなど）。 これは、初期デザインをよりコンパクトで簡潔に保つのに役立ち、訪問者が必要に応じてクリックして詳細情報を表示できるようにします。

このチュートリアルでは、DiviサイトのカスタムShow MoreTogglesを作成する2つの方法を紹介します。 最初の方法は、Diviトグルモジュールを、モジュールの下に配置され、追加テキストを表示/非表示にする準備ができているshowmoreトグルに変換することです。 2番目の方法では、Diviの行またはモジュール全体を表示/非表示にできるshowmoreトグルを作成します。 ご想像のとおり、これにより、基本的に必要なコンテンツを表示または非表示にするための扉が開かれます。

始めましょう。

スニークピーク

これは、このチュートリアルで作成するトグルの表示を簡単に示したものです。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

1番目の方法：DiviToggleモジュールを使用してShowMoreToggleを構築する

まず、セクションに2列の行を追加します。

左側の列に、宣伝文句モジュールを追加します。

宣伝文モジュールの下に、トグルモジュールを追加します。 トグルモジュールを「もっと見る」トグルに変えて、トグルをクリックしたときに宣伝文モジュールの下にもっと多くのテキストを表示/非表示にするようにします。

これを行うには、トグルモジュールの設定を開き、タイトルテキストを更新します。

• タイトル：もっと見る

[デザイン]タブで、以下を更新してデフォルトのスタイルを削除します。

• トグルの背景色を開きます：rgba（0,0,0,0）;
• 閉じたトグルの背景色：rgba（0,0,0,0）;

• パディング：上0px、下0px、左0px
• ボーダー幅：0px

[詳細設定]タブで、次のカスタムCSSを更新します。

主な要素について…

display:flex;
flex-direction: column;
align-items: flex-end;

トグルタイトルの場合…

order:2;
padding-right:25px !important;

トグルコンテンツの場合…

order:1;
padding: 0px;

このトグルタイトルとトグルコンテンツは、display：flexのorderプロパティを使用して異なる順序で並べられます。 これで、クリック可能なタイトルがコンテンツの下に配置され、より多くのトグルを表示するように機能します。

次に、次のCSSクラスをトグルモジュールに追加します。

• CSSクラス：et-readmore-toggle

これは、トグルをクリックしたときにタイトルテキストを変更するために追加するJQueryコードでモジュールをターゲットにするために必要です。

トグルモジュールをクリーンアップし、すべてのパディングを削除して、トグルが上の宣伝文モジュールの真下に配置されるようにしました。 ただし、上部の宣伝文にはまだ下の余白が多すぎるため、トグル内のテキストは前の段落から離れすぎます。

トグルの上にある宣伝文モジュールの設定を開き、マージンを更新します。

• マージンボトム：10px;

これで、トグルのタイトルテキストを変更して、クリックしたときに「もっと見る」または「もっと少なく表示」と表示するために必要なJQueryを追加する準備が整いました。

コードを追加するには、トグルモジュールの下にコードモジュールを追加します。

次に、次のJQueryを貼り付けて、必要なスクリプトタグでコードをラップしていることを確認します。

(function($) {
    $(document).ready(function(){
        $('.et-readmore-toggle .et_pb_toggle_title').on('click', function(e) {
            if ($(e.target).closest('.et-readmore-toggle').hasClass('et_pb_toggle_open')) {
                $(this).text('Show More');
            } else {
                $(this).text('Show Less');
            }
        });
    });
})(jQuery);

結果は次のとおりです。

このデザインは明らかに基本的なものです。 組み込みのDiviオプションを使用して、ニーズに合わせてトグルにデザインを自由に追加してください。

2番目の方法：Diviモジュールまたは行を表示/非表示にするためのShowMoreトグルの構築

トグルモジュールを使用して最初にさらにトグルを表示するのが少し制限が多すぎると思われる場合は、この次の方法に興味があります。 Diviモジュールまたは行全体の表示/非表示に使用できるカスタムshowmoreトグルを作成します！

DiviモジュールのShowMoreToggleの構築

これがその方法です。

まず、最初の例と同じように、別の2列の行を作成します。

次に、宣伝文モジュールを列1に追加します。

宣伝文モジュールの下に、連絡フォームモジュールを追加します。

このお問い合わせフォームは、[もっと見る]ボタンをクリックしたときに表示/非表示にするモジュールになります。

コードでこのモジュールをターゲットにするには、お問い合わせフォームの設定を開き、次のCSSクラスを追加します。

• CSSクラス：et-show-more-content

また、表示/非表示にするモジュールの親コンテナをターゲットにする必要があります。 これにより、必要に応じて、ページに複数のshow moretoggleインスタンスを追加できます。 この場合、この連絡先フォームモジュールの親コンテナは列1です。列1の設定を開き、次のCSSクラスを追加します。

• CSSクラス：et-show-more-container

[もっと表示]トグルボタンを作成するには、お問い合わせフォームモジュールの下にボタンモジュールを追加します。

ボタンは好きなようにデザインできます。 完了したら、ボタンモジュールの設定を0ペンし、次のCSSクラスを追加します。

• CSSクラス：et-show-more-toggle

次に、ボタンのテキストを「もっと見る」に変更します。

これで、ショーのトグルを機能させるために必要なコードを追加する準備が整いました。

ボタンの下にコードモジュールを追加して、CSSとJQueryをドロップできるようにします。

まず、次のCSSをコードボックス内に貼り付けて、コードが必要なスタイルタグでラップされていることを確認します。

  .et-show-more-content {
    display:none;
  }
  .et-fb .et-show-more-content {
    display:block;
  }
  .et-show-more-toggle {
    cursor:pointer;
  }

次に、CSSの下に、次のJQueryを貼り付けて、コードがスクリプトタグでラップされていることを確認します。

(function($) {
    $(document).ready(function(){
        $('.et-show-more-toggle').on('click', function(e) {
            e.preventDefault();
            $(e.target).closest('.et-show-more-container').children('.et-show-more-content').slideToggle("300");
            $(this).toggleClass('et-show-more-toggle_active');
            if ($(this).hasClass('et-show-more-toggle_active')) {
                $(this).text('Show Less');
            } else {
                $(this).text('Show More');
            }
        });
    });
})(jQuery);

デザインのバランスをとるには、列1を複製して、別の同じ列を作成します。 空の3番目の列と、重複して持ち越された余分なコードモジュールを必ず削除してください。

結果は次のとおりです。

Divi行のShowMoreToggleの作成

Diviモジュールの表示の切り替えが増えたので、これに基づいて新しい表示の切り替えを追加し、行全体を切り替えましょう。

まず、新しいボタンを保持するための新しい1列の行を作成します。

次に、既存のshow moreボタンモジュールの1つをコピーして、新しい行内に貼り付けます。 次に、ボタン設定を開き、ボタンの配置を変更します。

• ボタンの配置：中央

表示/非表示にするコンテンツとして行をターゲットにしたいので、連絡先フォームモジュールのshowmoreトグルを含む行の設定を開きます。 次に、次のCSSクラスを行に追加します。

• et-show-more-content

また、行の親コンテナ（セクション）にカスタムCSSクラスを追加する必要があります。 セクション設定を開き、次のCSSクラスを追加します。

• et-show-more-container

結果は次のとおりです。

最終結果

これが、私たちが作成した3つのトグルの最終結果です。

最終的な考え

このチュートリアルの目的は、Diviで独自のshow moretoggleを作成するためのいくつかの方法を示すことでした。 プラグインを使用する必要がないように、そのうちの1つが将来的に役立つことを願っています。 これらの例に見事なデザインを追加しなかったとしても、それができないという意味ではありません。 この機能を適切に配置すると、Diviビルダーを使用して、これらの表示をより多くのトグルで表示するように設計できます。 または、事前に作成されたレイアウトのいくつかを取り込んで実験することもできます。

コメントでお返事をお待ちしております。

乾杯！