Velo by Wix コンテンツ表示・非表示ボタン

Wixパートナー和田英也
4月22日
読了時間: 2分

更新日：4月26日

Wix専門のWeb制作会社、合同会社アクトワンのVelo開発部です！

Wixでは、Velo（開発者モード）を使うことで、ユーザー操作に応じて表示内容を切り替えるような仕組みを簡単に作ることができます。

今回は、ボタンをクリックするとテキストを表示・非表示に切り替える方法をご紹介します！

Wixエディタ・Wix Studio共通の内容になります。

今回のゴール

ページに配置されたボタンを押すと、折りたたまれていたテキストが展開されて表示される
ボタンのラベルが「一部を表示」に切り替わる
もう一度押すとテキストが非表示になり、ボタンのラベルが「全てを表示」に戻る

このようなUIは、補足説明などのテキストを見せすぎず、スッキリと見せたいときにとても便利です。

使用する要素

Wixエディターで、以下の2つの要素をページに配置してください

テキストボックス（ID: #foldingtext）
ボタン（ID: #switchbutton）

※IDの設定は、エディター右側の「プロパティパネル」で確認・変更できます。※「開発者モード」をオンにしておく必要があります。

実際のコード

$w.onReady(function () {

    let isVisible = false; 

    

    $w('#switchbutton').onClick(() => {

        if (isVisible) {

            $w('#foldingtext').collapse();

            isVisible = false;

            $w('#switchbutton').label = "全てを表示";

        } else {

            $w('#foldingtext').expand();

            isVisible = true;

            $w('#switchbutton').label = "一部を表示";

        }

    });

});