Manchmal braucht man ein Accordion, das aus aktiven und inaktiven (nicht aufklappbaren) Einträgen besteht.
Mit jQuery lässt sich auch das recht elegant lösen.
Angenommen, wir haben folgende HTML Struktur:
<h3>Eintrag 1 - aktiv</h3> <p>dieser Eintrag lässt sich öffnen</p> <h3 class="ui-state-disabled">Eintrag 2 - inaktiv</h3> <p>hier setzen wir auf den Header eine CSS Klasse, die das Element später auch visuell als inaktiv kennzeichnet; kann entweder schon am Server passieren oder aber auch per JS am Client</p> <h3>Eintrag 3 - aktiv</h3> <p>und noch ein Element, das sich öffnen lässt</p>
dann brauchen wir noch folgendes Javascript, um das ganze zu aktivieren:
$('.accordion').each(function(){
$(this).accordion({
active: false,
collapsible: true,
autoHeight: false,
header: 'h3'
});
var accordion = $(this).data('accordion');
accordion._std_clickHandler = accordion._clickHandler;
accordion._clickHandler = function(e,t){
var c = $(e.currentTarget||t);
if (!c.hasClass('ui-state-disabled'))
this._std_clickHandler(e,t);
};
});
Wir biegen also den clickHandler auf unsere eigenen Bedürfnisse um und starten einfach keine Aktion, wenn ein Header mit der CSS Klasse ui-state-disabled geklickt wird.
