JSFiddle - React, Tailwind, and code Playground

by Ismail Ibraheem Shurrab

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <card></card>
  <card></card>
</div>

<template id="card">
  <div class="section">
    <div class="title" v-on:click="toggle">
      <span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span> Toggle This Section
    </div>
    <hr/>
    <div class="body" v-show="showSection">
      <img v-bind:src="imageUrl">
    </div>
  </div>
</template>

CSS

.section {
  width: 300px;
  background: lightgrey;
  margin-bottom: 20px;
}

img {
  height: 100px;
}

#toggle {
  display: block;
}

JavaScript

Vue.component('card', {
  template: '#card',
  methods: {
    toggle() {
     this.showSection = !this.showSection
    }
  },
  data() {
    return {
      showSection: true,
      imageUrl: 'https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg',
      toggleIcon: '+'
    }
  }
})

var app = new Vue({
  el: '#app'
})