Vueで アコーディオンパネルを作る

Vue Slide Up Down

VueではjQueryのslideUp slideDownのようにさくっとアコーディオン的な開閉ができなくて、自分で作るとなると高さを取得したりと面倒だし…。
なのでこちら↓を使わせてもらいました。
GitHub - danieldiekmeier/vue-slide-up-down: Like jQuery's slideUp/slideDown, but for Vue!

こんな感じで動きます。

See the Pen Vue slideToggle by KYOKO SUZUKA (@kyonchan) on CodePen.

使い方

Vueとvue-slide-up-downを読み込み

デモなのでcdnで読みこんでます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-slide-up-down@1.0.2/dist/vue-slide-up-down.umd.js"></script>

HTMLの記述

toggele buttonをクリックすると、<vue-slide-up-down></vue-slide-up-down>内を開閉させます。

<div id="app">
  <div v-on:click="toggle" class="togglebutton">toggle Button</div>
  <vue-slide-up-down :active="active">
    <div class="element">
      Vue slide Toggle!!
    </div>
  </vue-slide-up-down>
</div>

javascriptの記述

Vue.component('vue-slide-up-down', VueSlideUpDown)

new Vue({
  el: '#app',
  data: () => ({
　//activeがtrueの時開く。falseの時閉じる。
    active: true
  }),
  methods: {
    //ボタンクリックでactiveのtrueとfalseを切り替え
    toggle () {
      this.active = !this.active
    }
  }
})

css

あとは、cssで見た目を整えればオッケーです。簡単でうれしいです。

.togglebutton{
    padding : 1em;
    background-color:#2196F3;
    color:#FFF;
    cursor:pointer;
}
.element {
  padding : 1em;
  background-color:#B3E5FC;
}

いっぱい増やしたい場合は

コンポーネントにしてv-forで表示する感じでしょうか。
配列いじれば増やしたり減らしたり変更したりも簡単だから楽です。 ついでにopen/closeもつけてみました。

See the Pen yEoBmp by KYOKO SUZUKA (@kyonchan) on CodePen.