Javascript 打开图像。滑动切换

我有一个

p

标签，当它被点击时，一些文本会使用

.slideToggle

显示出来，但有一件事我无法开始工作，那就是当你点击

p

标签时，它旁边的箭头会从指向右侧变为指向下方。当你再次点击p标签时，它会回到指向右边而不是向下

html:

和#9658；康塞特图
洛勒姆
乱数假文
坐着
知识产权与社会权利，精英领袖
和#9658；A钓鱼
不结盟运动
维泰
埃尼姆
夸姆
前庭的生活。Phasellus id

jquery：

$(document).ready(function() { 
for(var i = 0 ; i <= 2 ; i++) { 
$('#section'+i).click( function() { 
    $('#'+this.id+'_balk').slideToggle(); 
            }); 
    }  
}); 

$（文档）.ready（函数（）{
对于（var i=0；i您可以更好地对HTML进行分组，例如根据不同的div制作不同的手风琴，以便更轻松地处理。由于我不想大量更改您的HTML，因此我制作了一个脚本以使现有的工作正常。请参阅更新的小提琴

我不得不在DOM遍历中应用一些糟糕的方法，因为HTML中的糟糕结构如下所示

$(this).prev().prev().find('img').attr('src',downImage);

见行动：

当我第一次开始开发它时，我使用div而不是tables，但是没有得到我想要的结果。如果你有时间的话，看看如何将HTML@Ananthan分组会很有趣
$(this).prev().prev().find('img').attr('src',downImage);

$(document).ready(function() { 
for(var i = 0 ; i <= 3 ; i++) { 
  $('#section'+i).click( function() {
    var me = $(this);
      $('#'+this.id+'_balk').slideToggle(
        function () {
          if ($(this).is(':visible')) {
            me.addClass('open');
          }
          else {
            me.removeClass('open'); 
          }
        }) 
      }); 
    }  
}); 

p[id^="section"].toggle-section:before {
    content: "\25B6";
    padding-right: 5px;
}
p[id^="section"].toggle-section.open:before {
    content: "\25BC";
}