Im trying to create a simple FAQ drop down but for some reason it is not working. Would you mind taking a look?

Thanks guys!

CSS

#faqs h3    { cursor:pointer; }
#faqs h3.active { color:#d74646; }
#faqs div { height:0; overflow:hidden; position:relative; }
#faqs div p { padding:0; margin-bottom:15px; } 

JavaScript:

$(document).ready(function() {
    $('#faqs h3').each(function() {
        var tis = $(this), 
            state = false, 
            answer = tis.next('div')
                        .hide()
                        .css('height','auto')
                        .slideUp();

            tis.click(function() {
                state = !state;
                answer.slideToggle(state);
                tis.toggleClass('active',state);
            });
    });
});

HTML

<div id="faqs">
    <h3>This is question 1?</h3>
        <div>
            <p>This is the answer to question #1.</p>
        </div>
    <h3>This is question 2?</h3>
        <div>
            <p>This is the answer to question #2.</p>
        </div>
</div>