j-ToggleMore

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Es un componente simple para alternar contenido.

Puedes cambiar CSS según tus necesidades.

Métodos:

component.toggle(force) puede alternar el componente. El parámetro force es opcional y forzará el valor. p.ej. component.toggle(true); mostrará ui-togglemore-after.

Es bueno saberlo:

El contenido del j-ToggleMore se divide en 2 partes: before y after. Cada parte debe estar definida. El componente agrega clases CSS a cada parte; por ejemplo, el primer div contendrá ui-togglemore-before y el segundo ui-togglemore-after.

Para evitar "parpadeo", agregue la clase hidden al segundo div.

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

Úselo con <ui-component name="togglemore">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Denis Granec. Fuente: repositorio de componentes Componentator, licencia 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>