基于Jquery实现的手风琴

HTML代码如下：

<div class="join-us-right">
    <ul>
        <li class="index-item">
            <div class="title">
                <p class="job-name">手风琴列表1</p>
                <p class="job-date">2017.8.18</p>
            </div>
            <div class="content">
                内容1
            </div>
        </li>
        <li class="">
            <div class="title">
                <p class="job-name">手风琴列表2</p>
                <p class="job-date">2017.8.18</p>
            </div>
            <div class="content">
                内容2
            </div>
        </li>
        <li class="">
            <div class="title">
                <p class="job-name">手风琴列表3</p>
                <p class="job-date">2017.8.18</p>
            </div>
            <div class="content">
                内容3
            </div>
        </li>
        <li class="">
            <div class="title">
                <p class="job-name">手风琴列表4</p>
                <p class="job-date">2017.8.18</p>
            </div>
            <div class="content">
                内容四
            </div>
        </li>
    </ul>
</div>

JS代码：

$(function() {
    $(".join-us-right li .title").click(function() {
        $(this).parent().animate({
            height: 408
        }, 500);
        $(this).parent().siblings().animate({
            height: 50
        }, 500);
    })  
})

CSS样式代码

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f7f7f7;
    padding-top: 40px;
}

.join-us-right {
    width: 932px;
    height: 100%;
    margin: 0 auto;
}

.join-us-right .title {
    background: #fff;
    height: 50px;
    line-height: 50px;
    width: 100%;
    font-size: 16px;
    color: #505050;
    cursor: pointer;
    font-family: "Hiragino Sans GB";
}

.join-us-right .title .job-name {
    width: 450px;
    display: inline-block;
    padding-left: 24px;
}

.join-us-right .title span {
    color: #bcbcbc;
}

.join-us-right .title .job-date {
    width: 300px;
    display: inline-block;
    text-align: right;
}

.join-us-right .content {
    background: #fff;
    height: 358px;
    font-size: 14px;
    font-family: "Hiragino Sans GB";
    color: #505050;
    padding: 20px 22px 20px 22px;
    line-height: 34px;
}

.join-us-right li {
    height: 50px;
    overflow: hidden;
    margin-bottom: 14px;
}

.join-us-right li.index-item {
    height: 408px;
}

效果图如下：