In Anwendungen für die Expandable Elemente benötigen dynamisch ein und ausgeblendet werden müssen, steht das jQuery-Plugin: expandable()
zur Verfügung.
Expandable¶ ↑
Eine Expandable Element wird durch einmal initialisiert und dann durch die Funktionen toggleVisibility, visible, hidden gesteuert.
Die Einbindung für Expandable ist wie folgt:
Expandable 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<button id="toggleBtn" class="btn btn-default active" aria-pressed="true" data-toggle="button" data-callback="expandSingle">Toogle Expandable</button> <button id="exp-visible" class="btn btn-default btn-icon" title="Icon-Button"> <i class="icon icon-maximize" aria-hidden="true"></i> </button> <button id="exp-hidden" class="btn btn-default btn-icon" title="Icon-Button"> <i class="icon icon-minimize" aria-hidden="true"></i> </button> <div id="exp-single"> <h4>Expandable 1</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p> <img src="assets/play.jpg" width="252" height="168" alt="Beispielbild"> </div>
$(window).load(function() { $('#exp-single').expandable(); $('#exp-visible').click(function (e) { $('#exp-single').expandable("visible") $('#toggleBtn').button('active') }) $('#exp-hidden').click(function (e) { $('#exp-single').expandable("hidden"); $('#toggleBtn').button('default') }) expandSingle = function () { $('#exp-single').expandable("toggleVisibility"); } })
Expandable Group¶ ↑
Eine Expandable Group wird durch eine Klasse definiert, die jedem Gruppenelement gegeben wird und die einmalig als option initialisiert wird.
Die Einbindung für eine Expandabe Group ist wie folgt:
Expandable 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<div class="btn-sectioned" data-toggle="buttonsectioned-radio"> <button class="btn btn-default active" data-callback="myFunctionExpand">Button 1</button> <button class="btn btn-default" data-callback="myFunctionExpand">Button 2</button> <button class="btn btn-default" data-callback="myFunctionExpand" disabled>Button 3</button> <button class="btn btn-default" data-callback="myFunctionExpand">Button 4</button> </div> <p id="callbackOutput-a" class="text-xsmall"></p> <div id="exp-a" class="expGroup"> <h4>Expandable 1</h4> <p>Lorem ipsum dolor sit amet…</p> </div> <div id="exp-b" class="expGroup"> <h4>Expandable 2</h4> <p>Lorem ipsum dolor sit amet…</p> </div>
$(window).load(function() { $('.expGroup').expandable({option:{group:'expGroup'}}); myFunctionExpand = function (element, event) { var elmTxt = element.text() switch (elmTxt) { case 'Text A': $('#exp-a').expandable("toggleVisibility"); break case 'Text B': $('#exp-b').expandable("toggleVisibility"); break } } }