JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-with-addons-0.9.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.9.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.folder_content{
    background: #f7f7f7;
    padding-bottom: 1px;
}
.itemBox { 
    padding: 2px 5px 35px 0px;
    margin: 2px 5px 5px 0px;
    border: black dotted 1px;
}

.folder_header{
    line-height:35px;
    height: 35px;
    background: #B1D9E7;
    position: relative;
    padding-left: 44px;
    margin-right:18px;
}

JavaScript 1.7

/** @jsx React.DOM */
var data = {
   "folder1":[
      {
         "text":"content1"
      }
   ],
   "folder2":[
      {
         "text":"content2a"
      },
      {
         "text":"content2b"
      }
   ]
};

var Folder = React.createClass({
    getInitialState: function() {
        return {open: this.props.initialOpen};
    },

    handleToggle: function (e) {
        this.setState({ open: !this.state.open});
    },

    render: function() {
        var items = [];
        if(this.state.open){
            this.props.items.forEach(function (item){
                items.push( <div className="itemBox">{item.text}</div>);
            });
        }
        return (
            <div className="items_directory">
                <div className="folder_header" onClick={this.handleToggle}>{this.props.name}</div>
                <div className="folder_content">
                    {items}
                </div>
            </div>
        );
    }
});

var App = React.createClass({
    getInitialState: function() {
        return {
            allOpen: false,
            directories: []
        };
    },

    render: function(){
        var allItems = this.props.allItems;
        var directories = [];
        for (var dirName in allItems) {
          if (allItems.hasOwnProperty(dirName)) {
            var i = <Folder items={allItems[dirName]} name={dirName} key={dirName} initialOpen={this.state.allOpen} />;
            directories.push(i);
          }
        }
        this.state.directories = directories;
        return (
            <div>
                <button onClick={this.toggleAll}>Toggle All</button>
                <div>{directories}</div>
            </div>
        );
    },

    toggleAll: function(){
        var open = this.state.allOpen = !this.state.allOpen;
        this.state.directories.forEach(function (dir){
            dir.setState({open: open});
        });
    }
});

React.renderComponent(<App allItems={data} />, document.body);