Velo初心者向け｜クリックで情報をスライド表示する「アコーディオン風」UIの作り方

篠原誠
5月7日
読了時間: 3分

クリックで情報をスライド表示するVelo初心者向け「アコーディオン風」UIの作成方法を説明する明るい日本語チュートリアルバナー

✅ はじめに

Webサイトを訪れた際、「クリックすると情報がスライドして表示される」という動きを見たことがありませんか？FAQや商品説明など、限られたスペースに効率よく情報を整理する手法として人気のUI（ユーザーインターフェース）です。

今回はVelo初心者の方向けに、この便利なUIの基本的な作り方をご紹介します。

正確には「アコーディオン」ではなく「アコーディオン風」と呼ばれるものですが、初心者でも簡単に試せて、効果的に使えるので、ぜひ挑戦してみてください。

🎯 今回つくるもの

質問をクリックすると、回答がスライドして表示される
もう一度クリックすると、回答がスライドして閉じる
複数の項目を同時に開けるシンプルな仕組み（※1つだけ開く本格アコーディオンの作り方は別記事でご紹介します）

🧰 まずは準備から

最初に、Wix Studioのエディターで以下を準備します。

質問用のテキスト要素（例：#question1）
例：「Q. Veloとはどんなツールですか？」

回答用のボックスやテキスト要素（例：#answer1）
例：「A. Wix StudioサイトをJavaScriptで自由に拡張できるツールです。」

回答部分は初期状態を 「折りたたまれた状態（Collapse）」 に設定しましょう。ここまで準備ができたら、次はVeloでクリック時の動きを実装していきましょう。

💻 Veloで実装してみよう（基本コード）

以下のコードをVeloエディタに追加します。


$w.onReady(function () {
  // 質問をクリックしたときの動きを指定
  $w("#question1").onClick(() => {
    if ($w("#answer1").collapsed) {
      // 折りたたまれていたら開く
      $w("#answer1").expand();
    } else {
      // すでに開いていたら閉じる
      $w("#answer1").collapse();
    }
  });
});