Vue

by khamer

HTML

<div id="app">


<collapsible-card>
  I am some content
</collapsible-card>
</div>

SCSS

.card {
  border: 6px double;
}

.card:not(.open) .content {
  display: none;
  
  @media screen and (min-width: 640px) {
    display: block;
  }
}

Vue

Vue.component('collapsible-card', {
	template: `<div class="card" :class="{ open }">
  					   <button @click="open = !open">toggle</button>
               <div class="content">
                 <slot />
               </div>
             </div>`,
  data: () => ({ open: false }),
})

new Vue({ el: "#app" })