javascript - 複数の div の折りたたみ: 他の要素が開いている場合は 1 つの要素を閉じる (jQuery)

Question

HTML

<ul id="slider">
<li>
    <a class="toggle" href="#g1"><img src="BLAHBLAH" /></a>
    <a class="toggle" href="#g2"><img src="BLAHBLAH" style="margin-left:30px;margin-right:30px" /></a>
    <a class="toggle" href="#g3"><img src="BLAHBLAH" /></a>
</li>
<li>
    <a class="toggle" href="#g4"><img src="BLAHBLAH" /></a>
    <a class="toggle" href="#g5"><img src="BLAHBLAH" style="margin-left:30px;margin-right:30px" /></a>
    <a class="toggle" href="#g6"><img src="BLAHBLAH" /></a>
</li>
<li>
    <a class="toggle" href="#g7"><img src="BLAHBLAH" /></a>
    <a class="toggle" href="#g8"><img src="BLAHBLAH" style="margin-left:30px;margin-right:30px" /></a>
    <a class="toggle" href="#g9"><img src="BLAHBLAH" /></a>
</li>
</ul>

<div id="g1" class="gallery"><p>gallery 1</p></div>
<div id="g2" class="gallery"><p>gallery 2</p></div>
<div id="g3" class="gallery"><p>gallery 3</p></div>
...

JS:

<script>
$('.toggle').click(function() {
    var $toggled = $(this).attr('href');
    $($toggled).siblings(':visible').hide("slide", {direction: 'up'}, 750);
    $($toggled).toggle("slide", {direction: 'up'}, 750);
    return false;
});
</script>

CSS:

<style>
.GALLERY { display: none; padding: 50px 20px 20px 20px; }
</style>

フィドル: http://jsfiddle.net/jdrVG/

タイトルが示すように、他のトグルがクリックされた場合に 1 つの要素を閉じるにはどうすればよいですか?

前もって感謝します ：-）

Answer 1

これを試すことができます。 デモ

 $($toggled).siblings(':visible').hide();