尝试将一个切换应用于多个 div

Question

关于这个问题中提供的答案： How to slide down a div then .fadeIn() the content and vice versa?

我提供的 js fiddle 具有专门用于其中一个 div 的 jquery。如果我有多个 div，我如何调整 jquery 代码以调用哪个 div 被单击？我已经修改了代码，但它不起作用：

<a href="#" onclick="toggleSlider();">toggle</a>
<div id="panelThatSlides" style="display:none;background:#eee;padding:10px;">
    <div id="content1Fades" style="opacity:0;filter:alpha(opacity=0);">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor  erat, et consectetur nisl.
    </div>
</div>
<p></p>
<a href="#" onclick="toggleSlider();">toggle2</a>
<div class="panelThatSlides2" style="display:none;background:#eee;padding:10px;">
    <div id="content2Fades" style="opacity:0;filter:alpha(opacity=0);">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor  erat, et consectetur nisl.
    </div>
</div>
<p>HELLO WORLD</p>

jquery，我想我是在使用 jquery 来识别“contentthatfades 部分错误：

function toggleSlider() {
    if ($("#"+ this.id).is(":visible")) {
        $("#content"+this.id+"Fades").animate(
            {
                opacity: "0"
            },
            600,
            function(){
                $("#"+ this.id).slideUp();
            }
        );
    }
    else {
        $("#"+ this.id).slideDown(600, function(){
            $("#content"+this.id+"Fades").animate(
                {
                    opacity: "1"
                },
                600
            );
        });
    }   
}

Answer 1

像这样更改html：-

<a href="#" onclick="toggleSlider(this);">toggle</a>
<div id="panelThatSlides" style="display:none;background:#eee;padding:10px;">
<div id="content1Fades" style="opacity:0;filter:alpha(opacity=0);">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor  erat, et consectetur nisl.
    </div>
 </div>
  <p></p>
   <a href="#" onclick="toggleSlider(this);">toggle2</a>
    <div class="panelThatSlides2" style="display:none;background:#eee;padding:10px;">
    <div id="content2Fades" style="opacity:0;filter:alpha(opacity=0);">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor  erat, et consectetur nisl.
</div>

你好世界

然后是jquery函数：-

   function toggleSlider(el) {
        var dv = $(el).next('div');
        if (dv.is(":visible")) {
           dv.animate(
                {
                    opacity: "0"
                },
                600,
                function () {
                    dv.slideUp();
                }
            );
        }
        else {
            dv.slideDown(600, function () {
                dv.animate(
                    {
                        opacity: "1"
                    },
                    600
                );
            });
        }
    }

Demo