Trying to apply one toggle to multiple divs

Question

Relating to the answer provided in this question: How to slide down a div then .fadeIn() the content and vice versa?

I the js fiddle provided has the jquery specifically for one of the divs. If I have multiple divs, how do I adapts the jquery code to be called on which ever div is clicked? I have adapted the code, but it does not work:

<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>

The jquery, I think I am using the jquery to identify the "contentthatfades portion wrong:

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

Change html like this:-

<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>

HELLO WORLD

and then jquery function:-

   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