【jQuery】スライドダウン開閉タブ

by tea4two

HTML

<script src="https://raw.github.com/JangoSteve/jQuery-EasyTabs/master/lib/jquery.easytabs.min.js"></script>
<div id="tabContainer">
<ul id="nav">
<li><a href="#tab1" class="tabs">menu1</a></li>
<li><a href="#tab2" class="tabs">menu2</a></li>
<li><a href="#tab3" class="tabs">menu3</a></li>
<li><a href="#tab4" class="tabs">menu4</a></li>
</ul>


    <div id="tab1" class="pane">
        Tab1 Contentents...
    </div>
    <div id="tab2" class="pane">
        Tab2 Contentents...
    </div>
    <div id="tab3" class="pane">
        Tab3 Contentents...
    </div>
    <div id="tab4" class="pane">
        Tab4 Contentents...
    </div>
<!--div id="childTab" style="display: none;">
</div-->

<!--/#tabContainer--></div>

CSS

#nav {
    width: 100%;
    height: 25px;
}
#nav li {
    display: block;
    float: left;
    width: 80px;
    text-align: center;
    padding: 10px;
    height: 30px;
    border: 1px solid #ccc;
}
#nav li.active {
    background: #f00;
    border: 1px solid #f00;
}
#nav li.active a {
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}
#childTab {
    clear: both;
    width:100%;
    padding: 5px;
    background: #efefef;
}
.pane {
    clear: both;
    background: #f0f0f0;
}

JavaScript

//easytabの設定
$('#tabContainer').easytabs({
    animationSpeed: 300,            
    collapsible: true
});

//スライドダウンの設定
/*
$('.tabs').click(function(){
    if ($('#childTab').css('display') == 'none') {
        $('#childTab').slideDown('fast');
    }
});
*/

/*
else{
        $('#childTab').slideUp('fast');
    }
*/