Collapse and order divs / list

Question

What would be the best approach to get the same effect displayed here(right side with "Nieuws", "Laatste reacties" etc.)

Are there any 'plugins' for jquery written already to make my life a bit easier?

Answer 1

Simple example:

http://jsfiddle.net/LVsJs/

Using slideToggle.

Answer 2

If you are thinking about that collapse panel then you can use jQuery toggle function: http://jqueryui.com/demos/toggle/ You can attach other effects to the toggle function as well.

If you want such tabls like on that page take look here: http://jqueryui.com/demos/tabs/ With small customization they will look exacly like on your example page.

Answer 3

I am not sure about plugins, but this is a pretty easy thing to do with jquery. You basically use something like:

<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>