jquery - div/リストを折りたたんで注文する

Question

ここに表示されているのと同じ効果を得るのに最適なアプローチは何ですか（右側に「Nieuws」、「Laatstereacties」などがあります）

私の生活を少し楽にするためにすでに書かれたjqueryの「プラグイン」はありますか？

Answer 1

簡単な例：

http://jsfiddle.net/LVsJs/

slideToggleを使用します。

Answer 2

その折りたたみパネルについて考えている場合は、jQueryトグル関数を使用できます。http： //jqueryui.com/demos/toggle/トグル関数 に他のエフェクトをアタッチすることもできます。

そのページのような表が必要な場合は、次を参照してください。http: //jqueryui.com/demos/tabs/ 少しカスタマイズすると、サンプルページのように正確に表示されます。

Answer 3

プラグインについてはよくわかりませんが、これはjqueryで行うのは非常に簡単です。基本的に次のようなものを使用します。

<div id="fullbox">
  <div id="header">
     Some Header Text
     <a id="expandcollapselink" href="#">Expand</a>
  </div>
  <div id="body">
     Box Body
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
   $('.expandcollapselink').click(function() {
      if ($('#fullbox').hasClass('.active')) {
         $('$body').hide();
         $('#fullbox').removeClass('.active');
      } else {
         $('#body').show();
         $('#fullbox').addClass('.active');
      }
   });
});
</script>