Jquery SlideToggle mehrere gleitende divs

Question

Ich habe für eine Weile gesucht und ich bin immer noch eine relevante Antwort zu finden. Ich möchte, dass meine versteckten divs, die alle der gleichen Klasse angehören, gleiten, aber wenn man gleitet, schließt sich das andere, das offen ist. Außerdem möchte ich, dass die Option Informationen anzeigen/ausblenden nur für das div, das umgeschaltet wird, geändert wird.

Hier mein html

<p> 
    <a class="opener" href="javascript:slideTogle();">Click Here For Information</a> 
</p> 
<div class="content"> 
    <p>If you are looking to purchase your first home, reduce your existing monthly 
     repayments, pay off you mortgage early, raise cash for home improvements 
     or to pay off debt or even buy a property to let out we are able to assist 
     and advise you from start to finish. We have access to a wide range of 
     lenders offering independent mortgages to suit you.</p> 
    <p>Your home may be repossessed if you do not keep up repayments on your 
     mortgage.</p> 
    <ul> 
     <li>First time Buyers</li> 
     <li>Remortgages</li> 
     <li>Capital raising</li> 
     <li>Debt Consolidation</li> 
     <li>Buy To Let</li> 
    </ul> 
</div> 

ist und hier ist mein Javascript

$(document).ready(function() { 
    // put all your jQuery goodness in here. 
    $('.content').hide(); 
    $('.content.open').show(); 

    $('.opener').click(function() { 


     $(this).parent().next('.content').slideToggle(300, function() { 
      $(".opener").text($(this).is(':visible') ? "Hide Information" : "Click Here For Information"); 
     }); 
    }); 
}); 

Ich bin neu in Jquery/Javascript, aber ich Grundkenntnisse in PHP und eine gute HTML-Kenntnisse haben/css .

dank

Answer 1

Wie this?

$(document).ready(function() { 
    // put all your jQuery goodness in here. 

    $('.opener').click(function (e) { 
     var $opener = $(this); 
     var $content = $opener.parent().next('.content');   

     e.preventDefault(); 

     $content.toggleClass('open').slideToggle(300, function(){ 
      $opener.text($content.hasClass('open')?"Hide Information":"Click Here For Information"); 
     }); 

    }); 
});​