点击显示隐藏

单个点击显示再点击隐藏，多个点击显示当前，隐藏其他

HTML

<div class="matBox">
            <ul>
                <li class="inactive inforNav">
                    首页<i></i>
                    <div class="inforDiv" style="display: none;">
                        <p>111111111</p>
                    </div>
                </li>
                <li class="inactive inforNav">
                    信息报告<i></i>
                    <div class="inforDiv" style="display: none;">
                        <p>222222222222222222222</p>
                    </div>
                </li>
                <li class="inactive inforNav">
                    首页<i></i>
                    <div class="inforDiv" style="display: none;">
                        <p>3333333333</p>
                    </div>
                </li>
                <li class="inactive inforNav">
                    信息报告<i></i>
                    <div class="inforDiv" style="display: none;">
                        <p>444444444444444444</p>
                    </div>
                </li>
            </ul>       
            <li class="inactive inforNav">
                    首页<i></i>
                    <div class="inforDiv" style="display: none;">
                        <p>5555555555555555555</p>
                    </div>
                </li>
                <li class="inactive inforNav">
                    信息报告<i></i>
                    <div class="inforDiv" style="display: none;">
                        <p>666666666666666666666</p>
                    </div>
                </li>
                <li class="inactive inforNav">
                    首页<i></i>
                    <div class="inforDiv" style="display: none;">
                        <p>77777777777777777</p>
                    </div>
                </li>
                <li class="inactive inforNav">
                    信息报告<i></i>
                    <div class="inforDiv" style="display: none;">
                        <p>8888888888888888888</p>
                    </div>
                </li>
        </div>

    </div>

CSS

.inforDiv{background:#f7f7f7;padding:0px 20px 20px 0px;display:none;}
.inforBox ul.inforDiv{border:none;}
.inforDiv li{overflow:hidden;padding:10px;border-bottom:1px dashed #ddd;}
.matBox ul{padding: 10px;}
.matBox li{ padding: 10px;height:auto;line-height: 40px;border-bottom: 1px solid #dedede;cursor: pointer;}
.matBox li div{background:#fff;border-top:1px dashed #dedede;padding: 20px;text-align: center;}

JS

$(document).ready(function() {
    $('.inactive').click(function() {
        if ($(this).children('div').css('display') == 'none') {
            $(this).siblings('li').removeClass('inactives');
            $(this).siblings('li').children('div').slideUp(100);
            $(this).addClass('inactives');
            $(this).children('div').slideDown(100);

        } else if ($(this).children('div').css('display') == 'block') {
            $(this).removeClass('inactives');
            $(this).children('div').slideUp(100);
            $(this).siblings('li').removeClass('inactives');
            $(this).siblings('li').children('div').slideUp(100);
        }
    })
});