How do I add a more/less link in block? How do I add a more/less link to drop-down and roll up a block?

I have a custom search block with a lot of field items and as such, the block is so long.
I want to be able to add a more link to drop down the redundant fields and less to roll up the block again.

I'm trying to do something similar to the search block on checki.com.ng. I am running a Drupal 7 site, naijabooker.com.
I assume you have a custom block with a form created from your custom module.
You would need to add an attribute #prefix to the first field item starting from which you want to hide the items and add an attribute #suffix to the last field item you want to hide, For example, 

$form['first_item']['#prefix'] = '&lt;div id="accordian"&gt;';

// more elements here

$form['last_item']['#suffix'] = '&lt;/div&gt;'; 


Then, you can bind jQuery.slideUp() and jQuery.slideDown() to the more/less link element, let's say for example, #moreless.

$('#moreless').bind('click', function(){ 
    if( $('#accordian:visible').size() ){
         $('#accordian').slideUp();
         $(this).html('More &amp;raquo;');
     }else{
         $('#accordian').slideDown();
         $(this).html('Less &amp;laquo;');
     }
}​);​


You can see the working jQuery code here. These two jQuery functions are provided by jQuery core API. You don't need to include any extra library.