Concerning the answer provided in this query: How to slide down a div then .fadeIn() the content and vice versa?
In the js fiddle shared, the jQuery code is specifically designed for one of the divs. If there are multiple divs, how can the jQuery code be adjusted to cater to any clicked div? Despite my attempts to adapt the code, it does not seem to function correctly:
<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>
I believe I might be incorrectly referencing the "contentthatfades" section with the jQuery:
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
);
});
}
}