# j-ToggleMore

> Het is een eenvoudige component om inhoud te nemen.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: nl
Content-SHA256: 0a9d637ce56a9892fe4b32f32cc66bbc6cb3a951c37e03cb949620a510de7141
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Het is een eenvoudige component om inhoud te nemen.

- Je kunt CSS wijzigen voor je behoeften.


__Methoden__:

- `component.toggle(force)` kan de component afnemen. de parameter `force` Het is optioneel en zal de waarde versterken. `component.toggle(true);` zal laten zien `ui-togglemore-after`.

__Goed om te weten__:

De inhoud van de `j-ToggleMore` is verdeeld in 2 delen: `before` en `after`.Elke deel moet worden gedefinieerd.De component voegt CSS-klassen toe aan elk deel, bijvoorbeeld de eerste `div` bevat `ui-togglemore-before` en de tweede `ui-togglemore-after`.
Om 'blink' te vermijden, voeg de klasse `hidden` toe aan de tweede `div`.

---

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

Gebruik het met `<ui-component name="togglemore">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator CDN door standaard). auteur: Denis Granec. bron: de Componentator Componenten repository, MIT licentie.

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