如何在打开其他菜单时自动关闭侧面下拉菜单

Question

我使用一些html代码创建了侧边栏下拉菜单，如下面给出的jsfiddle所示。这段代码工作正常。它完美打开所有下拉菜单。但它不会自动关闭以前打开的下拉菜单。我想在打开新菜单时自动关闭先前打开的下拉菜单。请帮助我这样做。提前谢谢。

<style>
 summary::-webkit-details-marker {
 display: none;
}
summary:focus {
    outline-style: none;
}
article > details > summary {
    display: block;
    padding: 7px 10px 8px;
    font-family: "proximanova-light","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    color: #fff;
    margin: 10px 0;
    font-size: 16px;
    position: relative;
background-color: #428bca;
}


article > details > summary:hover {
    color: #fff;
    font-size: 16px;
    position: relative;
background-color: #39b3d7;
}

details > p {
    margin-left: 24px;
}
details details {
    margin-left: 36px;
}
details details summary {
    font-size: 14px;
}

</style>





    <div class="sidebar">



<span class="title">Dashboard</span>
    <section>
      <article>

        <details>
          <summary>Advertisers<span class="fa fa-caret-down pull-right fa-lg" style="margin-top: 3px;padding-right:5px;"></span></summary>
            <ul class="sidenav">
    <li class="account "><a href="/advertisers"><em>Overview</em></a></li>
    <li class="settings "><a href="/advertisers/myads"><em>My Ads</em></a></li>
    <li class="settings "><a href="/advertisers/mywaitlist"><em>My Wait List</em></a></li>
    <li class="settings "><a href="/buy"><em>Buy Ads</em></a></li>
    <li class="payment "><a href="/advertisers/mystats"><em>Ad Stats</em></a></li>
    <li class="payment "><a href="/advertisers/approvals"><em>Ad Approvals</em></a></li>
    <li class="separator"></li>
        </ul>
        </details>
      </article>

      <article>
        <details>
          <summary>Account<span class="fa fa-caret-down pull-right fa-lg" style="margin-top: 3px;padding-right:5px;"></span></summary>
            <ul class="sidenav">
    <li class="settings "><a href="/users/account"><em>My Profile</em></a></li>
    <li class="deposit"><a href="/cart/deposit"><em>Deposit Funds</em></a></li>
    <li class="transactions"><a href="/users/transactions"><em>Transactions</em></a></li>
        </ul>
          </details>
      </article> 

</section>


</div>

DEMO