jQuery Drop Down Panels - Only one panel open at a time?

Question

Question on drop down panels. I have a jsfiddle here http://jsfiddle.net/jmccommas/nJmNy/1/ and the issue I have is I only want the ability to have one panel open at a time. So when a user clicks on a different tab button then the panel that is open will close while the new panel is opened. Any help would be appreciated.

Here is the 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>

Answer 1

Try targeting the siblings of the clicked element ( demo ):

$this.click(function() {
    $(panels).slideToggle(600)
        .siblings().slideUp(600);
}); // end click