ボタンクリックでコンテンツを表示/非表示にする

公開日: 2024年11月20日更新日: 2026年10月20日

ClickFunnels の [ボタンの表示/非表示 ] アクションを使用すると、ボタンがクリックされたときにコンテンツを表示または非表示にすることで、動的ページを作成できます。これは、折りたたみ可能なセクションを作成し、非表示コンテンツのトグルを作成するための素晴らしいツールです。Button 要素の Show/Hide アクションを効果的に使用するための手順を見てみましょう。

必要条件

アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ

ステップ 1: 表示または非表示にするコンテンツを追加する

セクション**、行、または個々の要素**をページに追加して、表示または非表示にすることができます。
「表示」または「非表示」アクションに対して複数の項目を選択できます。例えば：
- 非表示の段落と画像を同時に表示します。
- セクションとボタン自体を同時に非表示にします。
次のステップに進む前に、ボタンで制御するすべてのコンテンツを追加します。

ステップ 2: 簡単に識別できるようにコンテンツタイトルの名前を変更する

表示または非表示にするコンテナ(セクション、行、または要素)の名前を変更します。これにより、ボタンアクションを設定するときに簡単に識別できます。名前を変更するには:

コンテナ(セクション、行、フレックス、または要素)にカーソルを合わせます。
**コードアイコン(<>)**をクリックして、コンテナのCSS設定にアクセスします。コードアイコンは、セクション、行、フレックス、エレメントなどのすべてのコンテナで使用できます。
名前を「非表示の段落」や「画像の表示」などの意味のある名前に変更します。明確で意味のある名前を使用すると、ボタン設定で正しいコンテンツを簡単に選択できます。
[ 更新 ] をクリックして、コンテナの名前を適用します。

ステップ3:表示内容を非表示にする

表示/非表示アクションを意図したとおりに機能させるには、表示するコンテンツをデフォルトで 非表示にする必要があります 。これにより、ボタンをクリックすると非表示のコンテンツが表示され、目的の効果が得られます。通常、ユーザーがオンデマンドでアクセスできる追加情報を提供する段落、画像、セクションなどのコンテンツを非表示にします。

コンテンツを非表示にする方法:

非表示にするコンテンツ(セクション、行、または要素 )の設定を開きます 。
[目👁️**]アイコン**をクリックすると、デフォルトでコンテンツが非表示になります。
プレビュー時にコンテンツがページに表示されなくなったことを確認します。ボタンがトリガーされるまで非表示のままになります。

ステップ 4: ボタンの表示/非表示アクションを構成する

次に、コンテンツの可視性を制御するようにボタン要素を構成します。

ボタンの設定方法:

ページエディターで、行内のオレンジ色の + プラス ボタンまたは [新しい要素を追加] ボタンをクリックして、新しい要素を挿入します。
[フォーム] カテゴリから、[ボタン] 要素を選択します。
ボタン設定を開き、 [ボタンのクリック時のアクション] セクションを見つけます。
アクションを 表示または非表示… に設定します。

表示/非表示のセクション/行/要素を選択する方法:

[表示 …] フィールド:
- ボタンをクリックしたときに表示するコンテンツ(セクション、行、または要素)を選択します。
- これらがステップ 3 で非表示にした内容であることを確認してください。
- 複数の項目を選択して同時に表示できます。
[隠す…] フィールド:
- ボタンをクリックしたときに非表示にするコンテンツ(セクション、行、または要素)を選択します。
- これには次のものが含まれます。
  - クリックすると、他の表示要素が消える必要があります。
  - ボタン自体を選択して「ボタンが消える」効果を作成できます。

最後の仕上げ:

ボタンアクションを設定した後、変更を保存します。
ページをテストして、表示/非表示アクションが意図したとおりに機能することを確認します。