Hi, that is regarding mostly html code test:

I have tried to build a simple "Field-Test-page" here is the code

<div><fieldset class=" collapsible"><legend class="collapse collapsed-processed"> Fieldset </legend><div class="fieldset-wrapper"><div class="table-wrapper"><table class="one"><thead><tr><th class="checkbox">Enabled</th><th>Name</th><th>Version</th><th>Description</th></tr></thead><tbody><tr class="odd"><td class="checkbox"><div class="form-item" id="status"><label class="option"><input type="checkbox" name="status[enabled]" id="edit-status-one" value="oneunlock" checked="checked" class="form-checkbox" /> </label></div></td><td><strong><label for="edit-status-one">Fieldset</label></strong></td><td class="versione">Version</td><td class="description">Description</td></tr></tbody></table></div></div>

Though that if I see the page in preview the fieldset is collapsible but saving the page no more collapsible.
I have analyzed the source trying many changing of the code but without succeeding.

Any hint?

Comments

harrisben’s picture

The problem is that the javascript used to achieve this is loaded when you are in the admin sections (because there are collapsible fieldsets present), but when viewing the node the javascript isn't loaded. Unfortunately I can't recall how to overcome this, but I'm sure it's simple. Btw, can you tell us what version of Drupal you're using?

Wolfflow’s picture

Sure, forgot to mention, 6.10. So all I have to do is to call the collapse.js whithin the node. I think there is a function for that. Thanks

If you look at word and nouns you do not clearly understand
take a look at Common Terminology
if is missing feel free to post a comment - ;-)

Contact me for drupal projects in English, German, Italian, Drupal Hosting Support.

Wolfflow’s picture

Ok, thought is not the best solution yet, as because for we newbies that just want to experiment with some test-page doings and not have to study for hours how independently JavaScript code(files) can be loaded within a single node
see Ajax Load or Have php snippet that needs to add a javascript onload event to the body element I will provide here my very simple example:

1. Step

- Insert any JavaScript code or a cloned .js file that you will find in your Drupal installation/folder misc/
in this example I copied the content of collapse.js file in my new page or story node-type and add some very important HTML code that initially you get mad to realize (<!-- after the beginning script-type declaration and //--> at the "end" and before the closing script-type declaration).

Here the collapse.js content

<script type="text/javascript"><!--
Drupal.toggleFieldset = function(fieldset) {
  if ($(fieldset).is('.collapsed')) {
    // Action div containers are processed separately because of a IE bug
    // that alters the default submit button behavior.
    var content = $('> div:not(.action)', fieldset);
    $(fieldset).removeClass('collapsed');
    content.hide();
    content.slideDown( {
      duration: 'fast',
      easing: 'linear',
      complete: function() {
        Drupal.collapseScrollIntoView(this.parentNode);
        this.parentNode.animating = false;
        $('div.action', fieldset).show();
      },
      step: function() {
        // Scroll the fieldset into view
        Drupal.collapseScrollIntoView(this.parentNode);
      }
    });
  }
  else {
    $('div.action', fieldset).hide();
    var content = $('> div:not(.action)', fieldset).slideUp('fast', function() {
      $(this.parentNode).addClass('collapsed');
      this.parentNode.animating = false;
    });
  }
};

/**
 * Scroll a given fieldset into view as much as possible.
 */
Drupal.collapseScrollIntoView = function (node) {
  var h = self.innerHeight || document.documentElement.clientHeight || $('body')[0].clientHeight || 0;
  var offset = self.pageYOffset || document.documentElement.scrollTop || $('body')[0].scrollTop || 0;
  var posY = $(node).offset().top;
  var fudge = 55;
  if (posY + node.offsetHeight + fudge > h + offset) {
    if (node.offsetHeight > h) {
      window.scrollTo(0, posY);
    } else {
      window.scrollTo(0, posY + node.offsetHeight - h + fudge);
    }
  }
};

Drupal.behaviors.collapse = function (context) {
  $('fieldset.collapsible > legend:not(.collapse-processed)', context).each(function() {
    var fieldset = $(this.parentNode);
    // Expand if there are errors inside
    if ($('input.error, textarea.error, select.error', fieldset).size() > 0) {
      fieldset.removeClass('collapsed');
    }

    // Turn the legend into a clickable link and wrap the contents of the fieldset
    // in a div for easier animation
    var text = this.innerHTML;
      $(this).empty().append($('<a href="#">'+ text +'</a>').click(function() {
        var fieldset = $(this).parents('fieldset:first')[0];
        // Don't animate multiple times
        if (!fieldset.animating) {
          fieldset.animating = true;
          Drupal.toggleFieldset(fieldset);
        }
        return false;
      }))
      .after($('<div class="fieldset-wrapper"></div>')
      .append(fieldset.children(':not(legend):not(.action)')))
      .addClass('collapse-processed');
  });
};
//--></script>

2. Step

add your HTML code that needs the JavaScript Functions or as in this Fieldset-Example the code above.
It should work ! see my Filedset-Test Page

Enjoy

Contact me for drupal projects in English, German, Italian, Drupal Hosting Support.

dman’s picture

Copy & Paste is so wrong.
Here is your answer

.dan.
if you are asking a question you think should be documented, please provide a link to the handbook where you think the answer should be found.
| http://www.coders.co.nz/ |

Wolfflow’s picture

Thank you @Dan, you are fully right, I state that this solution is not the best surely. Thanks for your best solution link.

Signature:

If you look at word and nouns you do not clearly understand
take a look at Common Terminology
if is missing feel free to post a comment - ;-)

Contact me for drupal projects in English, German, Italian, Drupal Hosting Support.