JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<ol style="list-style-type: none; padding: 0em;">
    <li>
        <input class="expander" type="checkbox" />Step one
        <ol>
            <li>big ol paragraph of stuff</li>
            <li>
                <input class="expander" type="checkbox">Nesting works! :)</input>
                <ul>
                    <li>big ol paragraph of stuff</li>
                </ul>
            </li>
        </ol>
    </li>
    <li>
        <input class="expander" type="checkbox" />Step two
        <ol>
            <li class="file">File 1</li>
        </ol>
    </li>
    <li>
        <input checked class="expander" type="checkbox" id="folder3" />Just set input to "checked" to open by default
        <ol>
            <li class="file">File 1</li>
        </ol>
    </li>
</ol>
<hr>
<input class="expander caret" type="checkbox" />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

/* 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/
*/

/* hide the native checkbox widget */
input.expander {
    visibility: hidden;
    margin-right: 0.5em;
}

/* alternate checkbox image via font-awesome */
input.expander:before {
    content:"\f196"; /*fa-plus-square-o - these codes can be found on the detail page for each fa icon*/
    font-family: FontAwesome;
    visibility: visible;
    cursor: pointer;
    margin-right: 1em;
    font-size: larger;
}

/* change the icon in the expanded state, i.e. checkbox checked = expanded */
input.expander:checked:before {
    content:"\f147"; /*fa-minus-square-o*/
}

/* alternative caret icon look */
/* collapsed */
input.expander.caret:before {
    content:"\f0da";
}
/* expanded */
input.expander.caret:checked:before {
    content:"\f0d7";
}

/* this does the expand/collapse of the subsequent element
targeting ol, ul by default for the easy treeview effect
-or- tagging anything you like with the css expandee class 

the tilde selector skips intermediate sibling elements until it finds designated selector
this is necessary to skip the text "Step one" in the example
or any other elements you wish to display between the input and the collapsed content */
/* expanded */
input.expander:checked ~ ol,
input.expander:checked ~ ul,
input.expander:checked ~ .expandee
{
    display: block;
}
/* collapsed */
input.expander:not(:checked) ~ ol,
input.expander:not(:checked) ~ ul,
input.expander:not(:checked) ~ .expandee
{
    display: none !important; /*important required to override other css with higher specificity that...