How can I properly use .slideToggle in this situation?

How can I properly use .slideToggle in this situation?

I'm currently using slideToggle on my FAQs page, except the way I have it written is very redundant. I just started with JQuery yesterday, so I'm not really sure how to correct this. I'll post an example for you:

This is the HTML:
  2. <span class="toggler" id="toggle1">This is a faq.</span>
  3. <div class="faq" id="faq1">
  4. ytoosfdsf<br/>
  5. ytoosfdsf<br/>
  6. </div>
  8. <span class="toggler" id="toggle2">This is a faq.</span>
  9. <div class="faq" id="faq2">
  10. ytoosfdsf<br/>
  11. ytoosfdsf<br/>
  12. </div>

This is my script I'm currently using:

  2. $(document).ready(function(){
  3. $("#toggle1").click(function(){
  4. $("#faq1").slideToggle();
  5. });
  6. });

  8. $(document).ready(function(){
  9. $("#toggle2").click(function(){
  10. $("#faq2").slideToggle();
  11. });
  12. });

So how can I make this script into a function that will always slideToggle the FAQ answer div below it when the span above is clicked? Thanks ahead of time.