How to hide one element while showing another?

I have set up an accordion styled Q&A section on my site that I'm building. When you click on a question it shows the answer. I want to tie the toggle actions together so that when one question is open and another is clicked, that the open one will close and the clicked one will open.

Here is a live example so that you can see: http://j开发者_如何学Csfiddle.net/reevine/WmAb7/

---

Try adding an $('.active').toggleClass('active').next().hide(); before the $(this).toggleClass('active').. line

You might also want to change the open class to active to maintain consistency. You can start your code with $('div.toggler:not(.active)').hide();

Edit:

I ended up changing a good amount, here's the link: http://jsfiddle.net/capo64/WmAb7/16/