Accordion - Liquor Tree

by amsik

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Expand All. Collapse All</title>
  <meta charset="UTF-8">
  
  <!-- first import Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/liquor-tree/dist/liquor-tree.umd.js"></script>
</head>
<body>
  <div id="app">
      <tree
        ref="tree"      
        :data="treeData"
        :options="treeOptions"
        @node:expanded="onNodeExpand"
        />
  </div>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
          treeData: getTreeData(),
          treeOptions: {
          	checkbox: true
          }
        }
      },
      
      methods: {
      	onNodeExpand(node) {
         const expandedNodes = this.$refs.tree.findAll({ state: { expanded: true } })
        	
         expandedNodes.forEach(expandedNode => {
           if (expandedNode.id !== node.id && node.depth === expandedNode.depth) {
             expandedNode.collapse()
           }
         })
        }
      }
    })
    
    
function getTreeData() {
  return [{
    text: 'Root',
    state: { expanded: true },
    children: [{
        text: 'Getting Started',
        state: {
          checked: true
        },
        children: [{
            text: 'Factory'
          },
          {
            text: 'Prototype'
          },
          {
            text: 'Mixin'
          },
          {
            text: 'Singleton'
          }
        ]
      },
      {
        text: 'JavaScript Code Style',
        state: {
          selected: true
        },
        children: [{
            text: 'Creational Design Patterns'
          },
          {
            text: 'Structural Design Patterns'
          }
        ]
      },
      {
        text: 'The Good Parts',
        children: [{
            text: 'OBJECT ORIENTED',
            state: {
              checked: true
            }
          },
          {
            text: 'ANONYMOUS FUNCTIONS',
...