JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<ol style="list-style-type: none; padding: 0em;">
    <li class="expander">
        Step one
        <ol>
            <li>big ol paragraph of stuff</li>
            <li class="expander"> Nesting works! :)
                <ul>
                    <li>another paragraph of stuff</li>
                </ul>
            </li>
        </ol>
    </li>
    <li class="expander"> Step 2
        <ol>
            <li class="file">File 1</li>
        </ol>
    </li>
    <li class="expander expanded"> expanded
        <ol>
            <li class="file">File 2</li>
        </ol>
    </li>
</ol>
<hr>
<div class="expander caret"> Works for generic elements, not just a tree!
<pre class="expandee">
highlights:

* leveraging (hidden) checkbox element to maintain expand/collapse state
  not an original idea, from here: http://www.thecssninja.com/css/css-tree-menu
  but like how was able to boil extra elements and css down to a
  single additional checkbox to enable the whole effect

* sporting font-awesome icons for expand/collapse widgets instead of hidden input widget via :before { content: "\fxyz" } 
  http://fortawesome.github.io/Font-Awesome/icons/
</pre>

CSS

.expander {
    cursor: pointer;
}

.expander > .fa { color: blue; }

JavaScript

$(function() {
    $(".expander")
        .prepend(function() {
        	return $('<i class="fa fa-'+(
            	$(this).hasClass("expanded")
                	? ($(this).hasClass("caret") ? "caret-down" : "minus-square-o")
            		: ($(this).hasClass("caret") ? "caret-right" : "plus-square-o")
            	) + '"></i>');
    	})
        .click(function() {
        	$(this).children("ol,ul,.expandee").toggle("fast");
        	$(this).not(".caret").children(".fa").toggleClass("fa-plus-square-o fa-minus-square-o");
			$(this, ".caret").children(".fa").toggleClass("fa-caret-right fa-caret-down");
			return false; //signal as event handled, don't bubble up the chain                     
    	})
    	.not(".expanded").children("ol,ul,.expandee").hide();
});