JSFiddle - React, Tailwind, and code Playground

by Vikash Kumar Gupta

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-collapse v-model="activeName" accordion @change="onChange">
  <el-collapse-item title="Consistency" name="1">
    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
  </el-collapse-item>
  <el-collapse-item title="Feedback" name="2">
    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
  </el-collapse-item>
  <el-collapse-item title="Efficiency" name="3">
    <div>Simplify the process: keep operating process simple and intuitive;</div>
    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
  </el-collapse-item>
  <el-collapse-item title="Controllability" name="4">
    <div class="controllbility" >
       No Data
    </div>
  </el-collapse-item>
</el-collapse>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

.el-collapse-item__header{
  padding-left: 10px;
  background: #e5e5e5;
  
  &.is-active{
    background: #a3a3ea;
  }
}

Babel + JSX

var Main = {
    data() {
      return {
        activeName: '1'
      };
    },
    methods: {
    	onChange(activeName){
      if(activeName == 4){
    			console.log(activeName);
          
          $.ajax({url: "https://www.mocky.io/v2/5bd6bbf63500007607fd7cda", success: function(result){
              $('.controllbility').html("Loading Data using Ajax");
              
              let companyNames = [];
              result.result.forEach( res => {
              	companyNames.push(res.companyName);
              });
              $('.controllbility').html("Companies: "+ companyNames.join(','));
              
          }});
          
      }
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')