Ответы слайдера JQuery FAQ не будут скрыты?

Я использую JQuery, чтобы сделать вертикальный слайдер для часто задаваемых вопросов, т.е. вы нажимаете на вопрос, и ответ скользит вниз. Все работает, за исключением того, что мои ответы не скрываются при загрузке страницы. Если вы щелкнете вопрос, чтобы ответ сдвинулся вверх, а затем снова щелкнете по тому же вопросу, чтобы сдвинуть ответ вниз, только тогда остальные ответы будут скользить вверх и скрываться. Может кто-нибудь увидеть, что я делаю неправильно.

CSS

<style type="text/css">
ul.qanda{
    color:#f5f5f5;
    list-style:none;
    margin:0;padding:0}
.qanda li{
    border:1px solid #f5f5f5;
    margin:1em 0;padding:0}
.qanda .question{
    cursor:pointer;
    display:block;
    font-size:1.3em;
    font-weight:300;
    padding:.75em 1.25em;
    position:relative}
.qanda .answer{
    border-top:1px dashed #f5f5f5;
    display:block;
    padding:.75em 1.25em}
.qanda a{
    color:#ccc}
.qanda .question{
    padding-left:1.5em}
.qanda .question:before{
    content:"+";
    font-weight:700;
    position:absolute;
    left:.5em}
.qanda .active:before{
    content:"-"}
</style>

JQuery

<script type="text/javascript">
$(document).ready(function(){
  $(".question").click(function(){
   var a = $(this).parent('li').find('.answer');
    if ( a.css('display') == 'none' ) {
        $('.question').removeClass('active');
        $('.answer').slideUp('fast');
        a.slideDown();
        $(this).addClass('active');
    } else {
            a.slideUp();
            $(this).removeClass('active')
    }
  });  });
 </script>

HTML

<ul class="qanda">
    <li>
            <strong class="question">Q: Question?</strong>
            <span class="answer">
                    A: Answer
            </span>
    </li>
    <li>
            <strong class="question">Q: Question?</strong>
            <span class="answer">
                    A: Answer
            </span>
    </li>
    <li>
            <strong class="question">Q: Question?</strong>
            <span class="answer">
                    A: Answer
            </span>
    </li>
    <li>
            <strong class="question">Q: Question?</strong>
            <span class="answer">
                    A: Answer
            </span>
    </li>

</ul>