Javascript 单击按钮后，使用jquery从accordian展开第二个面板

我是jquery的新手，我只想在单击

next

按钮时用手风琴展开第二个面板。在窗口加载时，第二个面板折叠。这是一个片段

$（函数（）{
$（“.accordion>li”）。悬停(
函数（）{
var$this=$（this）；
$this.stop（）.animate（{“宽度”：“480px”}，500）；
$（'.heading'，$this.stop（true，true.fadeOut（）；
$（'.bgDescription'，$this）.stop（true，true）.slideDown（500）；
$（'.description'，$this.stop（true，true.fadeIn（）；
$（'.heading1'，$this）.stop（true，true.fadeOut（）；
$（'.description1'，$this.stop（true，true.fadeOut（）；
},
函数（）{
var$this=$（this）；
$this.stop（）.animate（{“宽度”：“115px”}，1000）；
$（'.heading'，$this.stop（true，true.fadeIn（）；
$（'.bgDescription'，$this）.stop（true，true）.slideUp（500）；
$（'.description'，$this.stop（true，true.fadeOut（）；
$（'.heading1'，$this）.stop（true，true.fadeOut（）；
$（'.description1'，$this.stop（true，true.fadeOut（）；
}
)
});
$（“输入”）。单击（函数（）{
$（“面板”）.fadeOut（）；
});
手风琴{
列表样式类型：无；
位置：相对位置；
顶部：150px；
线高：1.5em；
}
手风琴1{
列表样式类型：无；
位置：相对位置；
顶部：150px；
线高：1.5em；
}
李手风琴{
浮动：左；
宽度：115px；
高度：240px；
显示：块；
右边框：2px实心#fff；
边框底部：2倍实心#fff；
背景：#fff；
背景重复：无重复；
背景位置：中心；
位置：相对位置；
溢出：隐藏；
光标：指针；
-网络工具包盒阴影：1px 3px 5px#555；
-莫兹盒阴影：1px 3px 5px#555；
盒影：1px 3px 5px#555；
}
ul.手风琴1李{
浮动：左；
宽度：115px；
高度：240px；
显示：块；
右边框：2px实心#fff；
边框底部：2倍实心#fff；
背景：#fff；
背景重复：无重复；
背景位置：中心；
位置：相对位置；
溢出：隐藏；
光标：指针；
-网络工具包盒阴影：1px 3px 5px#555；
-莫兹盒阴影：1px 3px 5px#555；
盒影：1px 3px 5px#555；
}
ul.accordionli.bg1{背景图片：url（images/download.jpg）；}
ul.acordion1li.bg2{背景图片：url（images/cats.jpg）；}
ul.accordion li.bleft{左边框：2px实心#fff；}
ul.accordion1 li.bleft{左边框：2px实心#fff；}
手风琴李.标题{
背景：#fff；
填充：10px；
边缘顶部：60像素；
不透明度：0.9；
文本转换：大写；
字体大小：粗体；
字母间距：1px；
字体大小：14px；
颜色：#444；
文本对齐：居中；
文本阴影：-1px-1px 1px#ccc；
}
ul.手风琴1 li.头部1{
背景：#fff；
填充：10px；
边缘顶部：60像素；
不透明度：0.9；
文本转换：大写；
字体大小：粗体；
字母间距：1px；
字体大小：14px；
颜色：#444；
文本对齐：居中；
文本阴影：-1px-1px 1px#ccc；
}
ul.手风琴李.说明{
位置：绝对位置；
宽度：480px；
高度：175px；
底部：0；
左：0；
显示：无；
}
ul.一致性1 li.说明1{
位置：绝对位置；
宽度：480px；
高度：175px；
底部：0；
左：0；
显示：无；
}
ul.手风琴li.说明h2{
文本转换：大写；
字体风格：普通；
字体大小：粗体；
字母间距：1px；
字体大小：45px；
颜色：#444；
文本对齐：左对齐；
利润率：0.15像素20像素；
文本阴影：-1px-1px 1px#ccc；
}
ul.一致性1 li.说明1 h2{
文本转换：大写；
字体风格：普通；
字体大小：粗体；
字母间距：1px；
字体大小：45px；
颜色：#444；
文本对齐：左对齐；
利润率：0.15像素20像素；
文本阴影：-1px-1px 1px#ccc；
}
ul.手风琴li.说明p{
线高：14px；
利润率：10px 22px；
文本转换：无；
字母间距：正常；
线高：1.6em；
}
ul.一致性1 li.说明1 p{
线高：14px；
利润率：10px 22px；
文本转换：无；
字母间距：正常；
线高：1.6em；
}
ul.手风琴李.说明a{
位置：绝对位置；
底部：5px；
左：20px；
文本转换：大写；
文字装饰：无；
颜色：#888；
}
ul.一致性1 li.说明1 a{
位置：绝对位置；
底部：5px；
左：20px；
文本转换：大写；
文字装饰：无；
颜色：#888；
}
手风琴李。描述a：悬停{
颜色：#333；
文字装饰：下划线；
}
ul.手风琴1 li.说明1 a:悬停{
颜色：#333；
文字装饰：下划线；
}
ul.手风琴李.BG说明{
背景：线性梯度（0度，#fff 40%，rgba（255255,0））；
高度：340px；
位置：绝对位置；
底部：0px；
左：0px；
宽度：100%；
显示：无；
}
ul.一致性1 li.BG说明1{
背景：线性梯度（0度，#fff 40%，rgba（255255,0））；
高度：340px；
位置：绝对位置；
底部：0px；
左：0px；
宽度：100%；
显示：无；
}

标题
标题1
说明1





标题2
标题2
说明2

为什么不使用许多库中的手风琴，比如Bootstrap或jQueryUI？你真的需要重新发明轮子吗？我不知道引导，所以使用css和jqueryAgain，jQueryUi有一个完美的工作手风琴，有事件、方法和回调：为什么你需要重新做？您有特殊的定制需求吗？bz根据要求，需要这样做。如果你知道，请告诉我哪里出了问题。好的，那么，请提供一个JSFIDLE和一个工作示例。