collapsible Panels
Der folgende Code muss in eine Javascript-Datei eingefügt werden und diese dann auf der entsprechenden Seite eingebunden werden.
/**
* Toggle the visibility of a panel using smooth animations
*/
Drupal.togglePanel = function(panel) {
if ($(panel).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)', panel);
$(panel).removeClass('collapsed');
content.hide();
content.slideDown( {
duration: 'fast',
easing: 'linear',
complete: function() {
Drupal.collapseScrollIntoView(this.parentNode);
this.parentNode.animating = false;
$('div.action', panel).show();
},
step: function() {
// Scroll the fieldset into view
Drupal.collapseScrollIntoView(this.parentNode);
}
});
}
else {
$('div.action', panel).hide();
var content = $('> div:not(.action)', panel).slideUp('fast', function() {
$(this.parentNode).addClass('collapsed');
this.parentNode.animating = false;
});
}
};
Drupal.behaviors.collapsePanel = function (context) {
$('div.panel-pane.collapsible > h2:not(.collapse-processed)', context).each(function() {
var panel = $(this.parentNode);
// Expand if there are errors inside
if ($('input.error, textarea.error, select.error', panel).size() > 0) {
panel.removeClass('collapsed');
}
// Turn the h2 into a clickable link and wrap the contents of the panel
// in a div for easier animation
var text = this.innerHTML;
$(this).empty().append($('<a href="#">'+ text +'</a>').click(function() {
var panel = $(this).parents('div.panel-pane:first')[0];
// Don't animate multiple times
if (!panel.animating) {
panel.animating = true;
Drupal.togglePanel(panel);
}
return false;
}))
.after($('<div class="panel-wrapper"></div>')
.append(panel.children(':not(h2):not(.action)')))
.addClass('collapse-processed');
});
};Dazu muss dann jedes entsprechende Panel noch die Klasse "collapsible" bekommen (und natürlich einen Titel in h2 haben).