Выпадающие панели jQuery - одновременно открыта только одна панель?

Вопрос о выпадающих панелях. У меня есть jsfiddle здесь http://jsfiddle.net/jmccommas/nJmNy/1/, и проблема у меня есть, я хочу только, чтобы одна панель открывалась одновременно. Поэтому, когда пользователь нажимает на другую кнопку вкладки, открытая панель закрывается при открытии новой панели. Любая помощь будет оценена по достоинству.

Вот JS:

$(function () {

    $('#dropDown a').each(function () {
        $('.panels').hide();
        var $this = $(this);
        var panels = $this.attr('href');

        $this.click(function () {
            $('.arrow').hide().fadeIn('slow');
            $('#dropDown a.active').removeClass('active');

            if ($('.panels').is(':visible')) {
                $('.panels').slideUp('slow');


            } else {
                $('.arrow').hide().fadeIn('slow');
                $(panels).slideDown('slow');
                $this.addClass('active').blur();

            }; // end else


        }); // end click

    }); // end each

    $('.close-button a, .arrow a').click(function (evt) { // This is the close button
        var panels = $('.panels');
        $(panels).slideUp(600);
        evt.preventDefault();
    }); // end close button


}); // end ready

HTML:

<div id="demoPanels">
    <ul id="dropDown">
        <li><a href="#panel1">Button 1</a></li>
        <li><a href="#panel2">Button 2</a></li>
        <li><a href="#panel3">Button 3</a></li>
        <li><a href="#panel4">Button 4</a></li>
    </ul>
    <div class="panelContainer">
    <div id="panel1" class="panels">
        <div class="arrow" align="center"><a href="#"><img src="arrow.jpg" alt=""></a></div>
        <h2>panel 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p>
        <div class="close-button">
            <span><a href="#">X</a></span>
        </div>
    </div>
    <div id="panel2" class="panels">
        <div class="arrow" align="center"><a href="#"><img src="arrow.jpg" alt=""></a> </div>
        <h2>panel 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p>
        <div class="close-button">
            <span><a href="#">X</a></span>
        </div>
    </div>
    <div id="panel3" class="panels">
        <div class="arrow" align="center"><a href="#"><img src="arrow.jpg" alt=""></a> </div>
        <h2>panel 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p>
        <div class="close-button">
            <span><a href="#">X</a></span>
        </div>
    </div>
    <div id="panel4" class="panels">
        <div class="arrow" align="center"><a href="#"><img src="arrow.jpg" alt=""></a> </div>
        <h2>panel 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p>
        <div class="close-button">
            <span><a href="#">X</a></span>
        </div>
    </div>
    </div>
</div>