js折叠面板

<div class="box">
<h1>折叠面板</h1>
<p>1</p>
</div>
<div class="box">
<h1>折叠面板</h1>
<p>2</p>
</div>
<div class="box">
<h1>折叠面板</h1>
<p>3</p>
</div>
p{
display: none;
}
h1{
font-size: 14px;
}
js代码
$(".box").click(function(){
var i = $(this).index();
$(this).find("p").toggle();

})
如果要动画进行的好看一点就是
$(".box").click(function(){
var i = $(this).index();
$(this).find("p").slideToggle(800);
})