jQuery sliding divs

Question

私は3つの画像ボタンを持っていて、それらの1つをクリックすると、テキストを含むスライディングdivが表示されます。ここで

私のJavaScriptコードです：

<script type="text/javascript"> 
    function showSlidingDiv() { 
     $("#slidingDiv").animate({ 
      "height": "toggle" 
     }, { 
      duration: 300 
     }) 
    } 
    function showSlidingDiv2() { 
     $("#slidingDiv2").animate({ 
      "height": "toggle" 
     }, { 
      duration: 300 
     }) 
    } 
    function showSlidingDiv3() { 
     $("#slidingDiv2").animate({ 
      "height": "toggle" 
     }, { 
      duration: 300 
     }) 
    } 
    </script> 

関数は、このコマンドでトリガーされます。

<a href="#" onClick="showSlidingDiv(); return false;"> 

スクリプトが正常に動作しますが、私はすべてのリンクをクリックすると、現在コンテンツが相互に追加 - 私が達成したいのは、新しいリンクをクリックすると開いているdivクラスを隠すことです。

どうすればよいですか？

Answer 1

jQuery accordionプラグインの使用をお勧めします。

更新： すべてのdivを閉じることができ、もう1つは選択されたオープン：あなたのhrefで

function toggleDiv(selectedDiv) { 
     // shortcut to select all sliding divs 
     $('div[id^="sliding"]').animate({ 
       "height": "toggle" 
      }, { 
       duration: 300 
      }, function() { 
       $(selectedDiv).show(); 
     }); 
       } 

、このような関数を呼び出します。

onClick="toggleDiv('#slidingDiv1'); // use slidingDiv2, 3 for other hrefs