包含菜单以显示点击过渡时的堆叠div

Question

使用this fiddle中的技术，如何获得指向堆叠div的列表项，以便在点击后将链接的div置于焦点（带有转换）？

我希望结合某人的jsfiddle，每次选择菜单项时都会在静态页面上显示转换。

我的示例使用切换菜单。一旦打开，我希望单击列表项以显示它指向的div以及转换。我的CSS布局很好，我知道div是堆叠的，因为当我选择底部div并给它显示none时，它下面的div框（以绿色着色）显示出来。

以下是我的代码：

<div id="maincontainer">
<nav id="sidebar-flex">
  <div id="menu">  
    <ul>
        <li><a href="#content1">The Journey</a>
        </li>
        <li><a href="#content2">The Pain of Infertility</a>
        </li>
        <li><a>India's Growing Insustry</a>
        </li>
        <li><a>Fertility Hights and Lows</a>
        </li>
        <li><a>The Income Gap</a>
        </li>
    </ul>
  </div>    
</nav>
<div id="contentwrap">

    <div id="header-flex"> <span id="button-flex"></span></div>
      <div id="content1">
            <h1>Amazingly simple off canvas navigation</h1>

            <h2>with Flexbox & toogleClass</h2>
    </div>

    <div id="content2">
            <h1>Amazingly simple off canvas navigation</h1>

            <h2>with Flexbox & toogleClass</h2>
    </div>
</div>        

这是我的（分叉和修改过的）jsfiddle： http://jsfiddle.net/hiimmike/RG7c2/2/

这里是jsfiddle（我分叉）的链接，我想要应用于我的布局： http://jsfiddle.net/hiimmike/kDYD9/

感谢任何帮助。谢谢！