Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
I think collapsible jquery can help you. Just add a reference to your template for the collapsible jquery and put css classes on the sections where you need it. See drupal_add_js() function and jqueryui.com/accordion/#default –  jan Dec 26 '12 at 4:55
    
For block hooks see, api.drupal.org/api/drupal/modules%21block%21block.api.php/… –  jan Dec 26 '12 at 5:12
    
can u pls break it down am still new to drupal –  wisdomgreat Dec 26 '12 at 8:36
    
Ill put it here once I get home but you may want to try this module for quicker results for you: drupal.org/project/views_accordion –  jan Dec 26 '12 at 9:05
    
You may put the collapsible.js file from your theme.info file, as is, scripts[] = collaspible.js and then add the jquery code for collapsible with reference to this document drupal.org/node/171213. I hope you know where to put the codes though. –  jan Dec 27 '12 at 8:51
show 1 more comment

1 Answer

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.