JSFiddle - React, Tailwind, and code Playground

by Yoshiharu Kamata

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="body">
<div id="viewport">
    <div id="top" class="pane">
         <h3>top</h3>

        <div>
            <p>top content</p>
        </div>
    </div>
    <div id="center" class="pane">
         <h3>center</h3>
        <div>
       <button id="add">add</button>
       <button id="remove">remove</button>
            <ul id="list">
                <li>item</li>
            </ul>
        </div>
    </div>
    <div id="bottom" class="pane">
         <h3>bottom</h3>

        <div>
            <p>bottom content</p>
        </div>
    </div>
</div>
</div>

CSS

#body {
    height: 500px;
    border: 1px solid blue;
    overflow: auto;
}
#viewport {
    min-height: 400px;
    border: 1px solid red;
    max-height: 100%;
}

CoffeeScript

$ -> 
  $(".pane").accordion
    collapsible: true
    heightStyle: "content"
  $("#add").on "click", ->
    $("<li>").text("item").appendTo("#list")
  $("#remove").on "click", ->
    $("#list li:last").remove()