# j-ToggleMore

> Ist eine einfache Komponente zum Umschalten von Inhalten.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 298126c0b23d3f585f63ae195d0fa3367f31cb23cc9b0db83a759840f9dcd3d4
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Ist eine einfache Komponente zum Umschalten von Inhalten.

- Sie können CSS an Ihre Bedürfnisse anpassen.


__Methoden__:

- `component.toggle(force)` kann die Komponente umschalten. Der Parameter `force` ist optional und erzwingt den Wert. z.B. `component.toggle(true);` zeigt `ui-togglemore-after` an.

__Gut zu wissen__:

Der Inhalt des `j-ToggleMore` ist in zwei Teile unterteilt: `before` und `after`. Jeder Teil muss definiert werden. Die Komponente fügt jedem Teil CSS-Klassen hinzu, zum Beispiel enthält der erste `div` `ui-togglemore-before` und der zweite `ui-togglemore-after`.
Um ein „Blinzeln“ zu vermeiden, fügen Sie die Klasse `hidden` zum zweiten `div` hinzu.

---

```html
<ui-component name="togglemore">
	<div>
		Content before
	</div>
	<div class="hidden">
		Content after
	</div>
</ui-component>
```

Verwenden Sie es mit `<ui-component name="togglemore">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Denis Granec. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

```html example.html
<div style="width: 400px">
	<ui-component name="togglemore">
		<div>
			BEFORE long text
		</div>
		<div class="hidden">
			AFTER Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda eligendi pariatur perferendis expedita tempora, deserunt sunt, quas similique velit quo, harum odio explicabo ea dicta aliquam ipsa, veniam vitae nemo.
		</div>
	</ui-component>
</div>
```