单击另一个面板时如何关闭所有打开的面板

我在这里运行了一个搜索框：

http://codepen.io/h0rhay/pen/Kgqwt

法典：

$('.findNavL1').click(function () {
    $(this).children('.slideContainer').toggleClass('show').css('z-index', +1);
});
$('.slideContainer').click(function () {
    if ($(this).hasClass('show')) {
        $(this).toggleClass('show');
    }
});

标记：

<div class="row">
    <div class="twelve columns width33">
        <div class="navContainer rel">
             <h2 class="navHeading">Find a holiday</h2>
             <ul class="findHolNav">
                <li class="findNavL1" onClick="return true"> <span>When</span>
                    <div class="slideContainer">
                         <h2 class="internalContent">This is some content 1</h2>
                    </div>
                </li>
                <li class="findNavL1" onClick="return true"> <span>How many Days </span>
                    <div class="slideContainer">
                         <h2 class="internalContent">This is some content 2</h2>
                    </div>
                </li>
                <li class="findNavL1" onClick="return true"> <span>Where</span>
                    <div class="slideContainer">
                         <h2 class="internalContent">This is some content 3</h2>
                    </div>
                </li>
                <li class="findNavL1" onClick="return true"> <span>Departing</span>
                    <div class="slideContainer">
                         <h2 class="internalContent">This is some content 4</h2>
                    </div>
                </li>
                <li class="findNavL1" onClick="return true"> <span>No. of People</span>
                    <div class="slideContainer">
                         <h2 class="internalContent">This is some content 5</h2>
                    </div>
                </li>
            </ul>
        </div>

.CSS：

.rel {
    position:relative;
}
.staticP {
    position:static !important;
}
.show {
    display:block !important;
}
.hide {
    display:none;
}
/* -----------------------------------------
   Shared Styles
----------------------------------------- */
.width33 {
    width:33.3% !important;
}
.navContainer {
    background:#ccc;
}
.findHolNav {
    list-style-type: none;
    padding:0;
}
.findNavL1{
    cursor:pointer;
}
.findNavL1 span {
    padding:20px;
    display:block;
}
.findNavL1:nth-of-type(odd){
    background-color:#c6c6c6;
}
.findNavL1:hover{
    background-color:#c2c2c2;
}
.findNavL1:hover > .slideContainer, .findNavL1:active > .slideContainer {
}
.slideContainer {
    display:none;
    background-color:lime;
    min-height:100%;
    position:absolute;
    top:0;
    left:100%;
    width:208%;
}

目前，UI 几乎是正确的。当您单击链接时，将打开相应的面板。

但是，如果单击另一个链接，其相应的面板将打开，但前一个面板保持打开状态。

我希望它关闭。

这将只保留活动的打开状态。

/

我应该说..UI比我之前说的要复杂一些。

第一次点击：滑动打开容器。

单击同一链接：幻灯片已关闭

在打开的容器内单击：容器保持打开状态。

（我已经把这一切都工作正常了）

如果单击其他链接，则打开容器关闭并打开新容器。

这就是我坚持的一点。