Vue.js Accordion

by CorFlamberg

HTML

<script src=" https://unpkg.com/vue"></script>
<div id="app">

  <div v-for="(item, index) in tree"  :class="[open ? 'nav-panel-open' : 'nav-panel']">
    <button class="accordion"  @click="togglePanel(index)">
    Panel {{item.id}}
    </button>
    <div  v-if="index == selected" v-show="open">
    <ul>
      <li>
        <p>{{selected}}</p>
      </li>
      <li>
         <p>i am box number one</p>
      </li>
    </ul>
    </div>
  </div>

<!--    <li v-for="(item, index) in items" :class="{highlight:index === selected}" @click="selected = index">{{item.id}}
    <span v-if="index === selected" v-show="selected">fuck + {{index}}</span>
    </li> -->

  <hr/>

  <pre>{{ tree | json}}</pre>

</div>

CSS

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\25BC';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: '\25BC';
    transform: rotate(180deg);
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active до версии 2.1.8 */ {
  opacity: 0;
}

JavaScript

new Vue({
    el: '#app',
    data: {
        tree: [{id:1},{id:2},{id:3}],
        open: false,
        selected: '',
    },
    methods: {
        togglePanel: function (index_panel) {
        this.selected = index_panel
           this.open = true
        }
    }
});