使用jquery显示主菜单选项卡内容

Question

单击主选项卡时，会显示主选项卡内容。单击子菜单时，它会显示相应的子菜单内容。但是当我单击子菜单后再次单击主菜单时，它没有显示其主菜单内容。它调用click事件但不显示内容。下面我附上了一个jsfiddle

https://jsfiddle.net/0pmzzp7e/1/

<ul class="nav nav-tabs" >
    <li class="active">
        <a href="#home" data-toggle="tab" onclick="clickHome()">Home</a>
    </li>
    <li>
        <a href="#contact"  data-toggle="tab" onclick='clickContact()'>Contact</a>
    </li>
</ul>

<div class="tab-content clear-fix" >
<!-- Home-->
    <div class="tab-pane active" id="home">
        <ul class="nav nav-tabs" id="submenu">
            <li>
                <a href="#home1" data-toggle="tab">Home 1</a>
            </li>
            <li>
                <a href="#home2" data-toggle="tab">Home 2</a>
            </li>
        </ul>
        <div class="tab-content clear-fix" >
           <div class="tab-pane active" id="home-content"> Home Content </div>
           <div class="tab-pane" id="home1"> Home 1 Submenu</div>
           <div class="tab-pane" id="home2">Home 2 Submenu</div>
        </div>
    </div>
<!-- End Home -->

<!-- Contact-->
    <div class="tab-pane" id="contact">
        <ul class="nav nav-tabs" id="submenu">
            <li>
                <a  href="#contact1" data-toggle="tab">Contact 1</a>
            </li>
            <li>
                <a  href="#contact2" data-toggle="tab">Contact 2</a>
            </li>
        </ul>
        <div class="tab-content clear-fix" >
            <div class="tab-pane active" id="contact-content"> Contact Content</div>
            <div class="tab-pane" id="contact1">Contact1 Content</div>
            <div class="tab-pane" id="contact2">Contact2 Content</div>
       </div>
   </div>
<!-- End Contact -->
</div>
<script>
    function clickHome(){
        $('#home-content').slideToggle(500);
    };
    function clickContact(){
        $('#contact-content').slideToggle(500);
    };
</script>