Imitating the recruitment list of a website, imitating the recruitment list of the website

Imitating the recruitment list of a website, imitating the recruitment list of the website
Introduction

After paying attention to the website of a friend's company and seeing the recruitment information, I suddenly realized that the effect was simple and reusable, And then I practiced it myself.

Disadvantages

After clicking the title to expand the content, the text is a little jitters and the problem has not been found.

Page

1 <div class = 'jobs _ box'> 2 

 
CSS
body    {        margin:0px;        padding:0px;        font-size:10px;    }        .jobs_box    {        width:590px;        margin:20px 0 0 10px;        border-bottom:1px dashed #e7eaec;    }        .jobs_box ul     {        list-style-type:decimal;    }        .jobs_box ul li     {        margin-left:15px;    }        .jobs_box .up, .jobs_box .down    {        width:16px;        height:16px;            }            .jobs_box .up {background:url(images/plus.png) no-repeat;}    .jobs_box .down{background:url(images/minus.png) no-repeat;}        .jobs_box h2    {       font-size:14px;       line-height:24px;       cursor:pointer;    }        .jobs_box h2 b     {        float:left;        width:560px;        margin:-3px 0 0 30px;            }        .jobs_box h3    {       padding-top:30px;           }        .jobs_box .hp_cont    {        padding:0 15px 0 25px;            }
 
JQuery code
<script type='text/javascript'>    $(function(){        $(".jobs_box").each(function(){            $(this).children('.up').click(function(){                if($(this).hasClass('up')){                    $(this).removeClass('up').addClass('down');                }else{                    $(this).removeClass('down').addClass('up');                }                                if($(this).next('.hp_cont').parent().siblings().children('h2').hasClass('down')){                    $(this).next('.hp_cont').parent().siblings().children('h2').removeClass('down').addClass('up');                }                $(this).next('.hp_cont').slideToggle().parent().siblings().children('.hp_cont').slideUp();            });        });    });</script>