The fieldset isn't shown as collapsed

Question

I am writing a module that executes some queries, and returns the result in to a collapsed fieldset which is not shown as collapsed; I view its content. The collapse.js files are loaded.

This is the code I am using.

$body = $body . '<fieldset class="collapsible collapsed">' . 
  '<legend class="gestioneinterna">Viste aggiuntive</legend>' . 
  '<description class="description">fieldset extra.</description>' .
  '<div><p class="home_body "><a href="?q=vista_progetti_categoria/1"><strong>Vista progetti</strong></a></p></div>';
print $body;  

Answer 1

You're missing a closing </fieldset> tag which probably won't be helping things, but I wouldn't advise doing it the way you currently are anyway.

A better way would be to make use of the theme_fieldset() function like so:

// Make sure the collapsible library is loaded
drupal_add_library('system', 'drupal.collapse');

// Build up the fieldset
$fieldset = array(
  '#theme' => 'fieldset',
  '#title' => 'Viste aggiuntive',
  '#attributes' => array('class' => array('collapsible', 'collapsed')),
  '#description' => 'fieldset extra.',
  '#children' => '<div><p class="home_body "><a href="?q=vista_progetti_categoria/1"><strong>Vista progetti</strong></a></p></div></fieldset>'
);

// Add it to the body
$body .= render($fieldset);

That works great for me.

You might want to replace the call to render() above with drupal_render() as it offers a minute performance increase; I tend to use render() for all my calls for this sort of thing for continuity, and so that I don't have to check the type of the data being passed.

In this case, as you know the argument is not a string, you could save yourself the few microseconds and use drupal_render() instead.

Answer 2

I used the following code for a quick test in a page callback, and it worked.

  drupal_add_js('misc/form.js');
  drupal_add_js('misc/collapse.js');

  $fieldset = array(
    '#attributes' => array(
      'class' => array('collapsible', 'collapsed'),
    ),
    '#title' => 'Viste aggiuntive',
    '#description' => 'fieldset extra.',
    '#children' => '<div><p class="home_body">' . l('<strong>Vista progetti</strong>', 'vista_progetti_categoria/1', array('html' => TRUE)) . '</p></div>',
  );

  return theme('fieldset', array('element' => $fieldset));

To notice that collapse.js needs form.js to work.
To be sure both the files are loaded, you can use drupal_add_js(); if the files are already added from a previous call to drupal_add_js(), they will not be added twice. Alternatively, you can replace those calls to drupal_add_js() with a call to drupal_add_library('system', 'drupal.collapse'). The code I wrote was written for a quick test just to verify I would have the same issue, but in general is preferable to call drupal_add_library() when there is a module that defines a specific library with hook_library(), for the fact drupal_add_library() loads all the dependencies (in this case, it would actually load both misc/collapse.js, and misc/form.js) without you know them beforehand. For a list of all the libraries defined from Drupal, see system_library() (mainly), and overlay_library() (secondarily); if one of the JavaScript files you need is listed there, it would be better to use drupal_add_library().

Apart from the <fieldset> tag not being closed in your code, the other problem could be:

• The code doesn't use all the CSS classes the code in the collapse.js file depends upon. When I look at the HTML output from my code, I see the following. (I reformatted the code to make the single parts more evident.)

  <fieldset class="collapsible form-wrapper collapse-processed">
    <legend>
      <span class="fieldset-legend">
        <a class="fieldset-title" href="#"><span class="fieldset-legend-prefix element-invisible">Hide</span> Viste aggiuntive</a>
        <span class="summary"></span>
      </span>
    </legend>
    <div class="fieldset-wrapper" style="">
      <div class="fieldset-description">fieldset extra.</div>
      <div>
        <p class="home_body"><a href="/dr72/vista_progetti_categoria/1"><strong>Vista progetti</strong></a></p>
      </div>
    </div>
  </fieldset>
  

• The form.js code is not loaded from the page you are outputting. This is could be the case, if you just added drupal_add_js('misc/collapse.js') to include the collapse.js file, or there is another module that used drupal_add_js('misc/collapse.js') without to use drupal_add_js('misc/form.js').

As side note, when creating HTML output, it is better to use the functions Drupal provides; in this case, I used theme_fieldset(), and l().
l(), in particular, outputs the correct URL. If you run the same code on a different server, such as one running on Windows, the URL would be always correct. That is also true when you move Drupal on a subdirectory of the root directory (which, in my case, is dr72); if you were to write the URL as you did, you would need to change the code you wrote (in the cases I reported), while using l() the code would not need to be changed. The same is true for url(), which is the function used by l().

Answer 3

Just as a reference for people looking for simple Drupal fieldsets for their content - use render arrays! So much simpler & much cleaner to read.

The following snippet is a page callback function, that builds a fieldset that has a table inside it, with some sample data.

function mypage() {
  $build['myfieldset'] = array(
    'fieldset' => array(
      '#type' => 'fieldset',
      '#title' => t('Fieldset legend'),
      '#attributes' => array('class' => array('collapsible', 'collapsed')),
      'content' => array(
        '#theme' => 'table',
        '#header' => array('Col1','Col2','Col3'),
        '#rows' => array(
          array('Data 1-1','Data 1-2','Data 1-3'),
          array('Data 2-1','Data 2-2','Data 2-3'),
          array('Data 3-1','Data 3-2','Data 3-3'),
        ),
        '#empty' => t('No RFMs in this state'),
       ),
     ),
     '#attached' => array('js' => array('misc/collapse.js', 'misc/form.js')),
   );
   return $build;
 }