j-ToggleMore

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

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.

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

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>