I have a page on a site of FAQs. I have used jQuery and have got it so clicking the question closes and opens the questions. However I want to change it so that the questions are closed to begin with but also if I click one and open another, the first one automatically closes. Also is there any way I can make the transition smoother?

This is the jQuery code...

1. <script src="http://code.jquery.com/jquery-latest.js"></script>
   <script>
   $(document).ready(setFaqs);
   
   function setFaqs() {
   
       $('#magic').click( function(){ $('#faq1').slideToggle('fast') } );
       $('#magic2').click( function(){ $('#faq2').slideToggle('fast') } );
       $('#magic3').click( function(){ $('#faq3').slideToggle('fast') } );
       $('#close').click( function(){ $('#heypresto').slideUp('fast') } );
   
   }
     </script>
   
   
   
   
   
   
   
   
   
   
   
   

And this is the structure of the HTML:

1. <div class="heypresto"><h3><a href="#" id="magic" class="magic">Question 1</a></h3>
   <div id="faq1"><p class="content">Answer to question 1</p></div></div>
   
   <div class="heypresto"><h3><a href="#" id="magic2" class="magic2">Question 2</a></h3>
   <div id="faq2"><ul><li>Answer part 1</li>
   <li>Answer part 2</li>
   <li>Answer part 3</li>
   </ul></div></div>
   
   
   <div class="heypresto"><h3><a href="#" id="magic3" class="magic3">Question 3</a></h3>
   <div id="faq3"><ul><li>Answer part 1</li>
   <li>Answer part 2</li></ul></div></div>
   
   
   
   
   
   
   
   
   
   
   
   

I hope someone can help with this!

thanks in advance, Iain