How do I add a more/less link in block?

Question

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.

Answer 1

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'] = '<div id="accordian">';

// more elements here

$form['last_item']['#suffix'] = '</div>'; 

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 »');
     }else{
         $('#accordian').slideDown();
         $(this).html('Less «');
     }
}​);​

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.