JSFiddle - React, Tailwind, and code Playground

by jhorvath

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<!--ko foreach: panels-->
<div class="accordion">
    <h2>Title of the section</h2>
    <div class="scroll-container">
         <p>Some Text  Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text 
        </p>
    </div>
</div>
<!--/ko-->

CSS

.accordion{
    display: inline-block;
    box-sizing: border-box;
    width: 48%;
    vertical-align: top;
}

.scroll-container{
    height: 100px;
    overflow-y: auto;
}

h2{
    cursor: pointer;
}

JavaScript

$(function() {
    var vm = function(){
        this.panels = [];
        for(var i = 0; i < 5; i++){
            this.panels.push(i);
        }
    };
    ko.applyBindings(new vm());
    
    $( ".accordion" ).accordion({
      heightStyle: "content",
      collapsible: true
    });
  });