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.

Beispielbild
<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.

**Tipp:** Durch das Verwenden einer Klasse, um ein Expandable Element einer Gruppe zugehörig zu machen, müssen die Expandable Elemente nicht auf einander folgen. Zu dem können einzelne Expandable Elemente unabhängig von der Gruppenzugehörigkeit durch *visible* und *hidden* gesteuert werden.

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.

Beispielbild

Expandable 2

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.

Beispielbild Beispielbild

Expandable 3

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.

Expandable 4

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.

Beispielbild
<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
    }
  }
}