# j-ToggleMore

> C'est un simple élément pour traiter le contenu.

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

C'est un simple élément pour traiter le contenu.

- Vous pouvez modifier CSS selon vos besoins.


__Méthodes__ :

- `component.toggle(force)` Il est possible d'utiliser le paramètre `force` Il est facultatif et va forcer la valeur. `component.toggle(true);` Je vais montrer `ui-togglemore-after`.

__Bon à savoir__ :

Le contenu du `j-ToggleMore` est divisé en 2 parties : `before` et `after`. Chaque partie doit être définie.Le composant ajoute des classes CSS à chaque partie, par exemple le premier `div` contiendra le `ui-togglemore-before` et le second `ui-togglemore-after`.
Pour éviter le "blink", ajoutez la classe `hidden` à la seconde `div`.

---

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

Utilisez-le avec `<ui-component name="togglemore">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Denis Granec. Source : le référentiel de composants Componentator, licence MIT.

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