JSFiddle - React, Tailwind, and code Playground

by cgough

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="heading" data-list-panel="sectonlist">
<span class="icon" >+</span>
 <span>Section 1</span>
 <div class="panel">
 This is a whole load of info
 </div>
</div>

<div class="heading" data-list-panel="secton2list">
<span class="icon" data-bind="click: togglePanelTwo">+</span>
 <span>Section 2</span>
 <div class="panel" data-bind="visible: accordionTwo">
 this is even more information
 </div>
</div>

<div class="heading" data-list-panel="secton3list">
<span class="icon">+</span>
 <span>Section 3</span>
 <div class="panel">
 this is a third set of information
 </div>
</div>

JavaScript

function accordionViewModel (){
//this.accordionOne = ko.observable(false);
this.accordionTwo = ko.observable(false);
//this.accordionThree = ko.observable(false);
var self = this;

//self.togglePanelOne = function (){
	//self.accordionOne(false);
//}

this.togglePanelTwo = function (){
        this.accordionTwo(!this.accordionTwo());
        this.accordionTwo();
        
}

//self.togglePanelThree = function (){
	//self.accordionOne(false);
//}
};

var test = accordionViewModel({});
ko.applyBindings(test);