# Znacznik zwijania/rozwijania w Treści

{% hint style="info" %}
Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
{% endhint %}

Poniżej przykładowy wygląd na wniosku z zastosowaniem w Treści znacznika zwiń/rozwiń:

![Ilustracja 1. Wygląd Treści na wniosku ze znacznikiem Zwiń/Rozwiń](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/vWp0fxZlq7wuwNmgXAJP/32k_files/image2024-2-6_13-52-34.png)

Tworząc Treść należy przygotować artefakt typu HTML. Przykładowy kod:

{% code title="Przykładowy HTML" expandable="true" %}

```html
<style>
  div.togglewrapper { margin-right: 10px; }
</style>

<div>Wartość z wniosku: <b style="color: red;">${GesTextField1}</b></div>

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed,
  lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
  Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
  sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu,
  vel tempus metus leo non est.
</div>

<div style="display:flex; align-items:center; justify-content:space-between;margin-top:10px;margin-bottom:10px;">
  <div>Lorem ipsum dolor sit amet</div>
  <div class="toggleWrapper">
    <div class="unfold">Rozwiń</div>
    <div class="fold">Zwiń</div>
    <div class="toggle-icon"></div>
  </div>
</div>

/more/

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed,
  lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
  Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
  sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu,
  vel tempus metus leo non est.
</div>
```

{% endcode %}

Za rozwijak odpowiada fragment:

{% code title="Element rozwijający" %}

```html
<div class="toggleWrapper">
  <div class="unfold">Rozwiń</div>
  <div class="fold">Zwiń</div>
  <div class="toggle-icon"></div>
</div>
```

{% endcode %}

Znacznik /more/ odpowiada za podział na część zwiniętą i rozwiniętą Treści — wszystko przed /more/ to zawartość widoczna domyślnie, a wszystko po /more/ to część rozwinięta.

Wyrównanie przycisku do prawej zależy od stylów zdefiniowanych wewnątrz Treści (w przykładzie w Treści zastosowano styl):

{% code title="Przykładowy styl wyrównania" %}

```html
<style>
  div.togglewrapper { margin-right: 10px; }
</style>

<div style="display:flex; align-items:center; justify-content:space-between;margin-top:10px;margin-bottom:10px;">
  ...
</div>
```

{% endcode %}

Ważne, żeby:

* umieścić przycisk w widocznej części Treści;
* elementy miały odpowiednie klasy: toggleWrapper, unfold, fold, toggle-icon;
* struktura przycisku była zachowana.

{% hint style="info" %}
Wniosek demo: demoTextContent
{% endhint %}