v-ons-list のアコーディオン

Onsen UI の v-ons-list コンポーネントでコンテンツを開閉するアコーディオン機能を実装したいときは、v-ons-list-item コンポーネントに expandable 属性を記述します。この v-ons-list-item コンポーネントをタップすると、 expandable-content クラスを付けたdiv要素の表示が切り替わります。

<v-ons-list-item expandable>
  Tap to expand
  <div class="expandable-content">This is shown when expanded</div>
</v-ons-list-item>

expandable 属性は v-ons-list-item コンポーネントでのみ有効です。そこでv-ons-list-header コンポーネントで動作するアコーディオン機能を自作してみました。

以下のサンプルは２つの v-ons-list からなっています。上段は v-ons-list-item に expandable 属性をつけたもの、下段は今回自作したものになります。「Tap to expand 」 をタップするとコンテンツが開閉します。

See the Pen Onsen UI by senmyou (@senmyou) on CodePen.

Vue のトランジションフック を利用しています。リストヘッダでアコーディオンを行いたい方の参考になればと思います。