Semantic UI - Ractive Component - Accordion

Accordion

by vikikamath

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<script id="templ" type="text/ractive">
		<div class="ui accordion">
    	{{#tabs}}
  		<div class="{{#active}}active{{/active}} title">
    		<i class="dropdown icon"></i>
        {{title}}
  		</div>
  		<div class="{{#active}}active{{/active}} content">
    	{{>content}}
  		</div>
      {{/tabs}}
   </div>
</script>

<main></main>

JavaScript

var MyContent = Ractive.extend({
	template: '<div>Hi {{name}}, this is my text:{{text}}</div>'
})

var MyAccordion = Ractive.extend({
	template: '#templ'
})



new Ractive({
  el: 'main'
  ,partials: {
  	thumbnail: '<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>'
    ,embeddedComponent: '<MyContent name="Va" text="bcbdscbd"/>'
  }
  ,template: '<MyAccordion tabs="{{tabs}}"/>'
  ,components: {
  	MyAccordion: MyAccordion
    ,MyContent: MyContent
  }
  ,data () {
  	
    return {
    
    	tabs: [
      	{
        	title: 'Using Partial with text'
          ,content: 'thumbnail'
          ,active: true
        }
        , {
        	title: 'Using Partial with embedded component'
        	,content: 'embeddedComponent'
          ,active: false
        }
      
      ]
    }
  
  }
  
})