<!--
//
//
// Expandable
-->

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:

<div class="tc-example">
  <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, 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.</p>
  <img src="assets/play.jpg" width="252" height="168" alt="Beispielbild">
  </div>
</div>

```html
<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>
```

```js
$(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.

<div class="tc-note tc-note-info">
**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.
</div>

Die Einbindung für eine Expandabe Group ist wie folgt:

<div class="tc-example">
  <div class="btn-sectioned" data-toggle="buttonsectioned-radio">
    <button class="btn btn-default active" data-callback="myFunctionExpand">Text A</button>
    <button class="btn btn-default" data-callback="myFunctionExpand">Text B</button>
    <button class="btn btn-default" data-callback="myFunctionExpand">Text C</button>
    <button class="btn btn-default" data-callback="myFunctionExpand">Text D</button>
  </div>

  <div id="exp-a" class="expGroup">
    <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, 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.</p>
  <img src="assets/play.jpg" width="252" height="168" alt="Beispielbild">
  </div>
  <div id="exp-b" class="expGroup expandable-hidden" >
    <h4>Expandable 2</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, sed diam voluptua.</p>
    <img src="assets/play.jpg" width="252" height="168" alt="Beispielbild">
    <img src="assets/play.jpg" width="252" height="168" alt="Beispielbild">
  </div>
  <div id="exp-c" class="expGroup expandable-hidden" >
    <h4>Expandable 3</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, 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.</p>
  </div>
  <div id="exp-d" class="expGroup expandable-hidden" >
    <h4>Expandable 4</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, 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.</p>
  <img src="assets/play.jpg" width="252" height="168" alt="Beispielbild">
  </div>
</div>

```html
<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>
```

```js
$(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
    }
  }
}
```