Попытка применить одну пуговицы к несколько диве

Question

, относящейся к ответу, представленному в этом вопросе: How to slide down a div then .fadeIn() the content and vice versa?

Я, JS скрипки при условии, имеет 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> 

HELLO WORLD

, а затем функция 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