# j-ToggleMore

> Es un componente simple para alternar contenido.

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

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

---

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

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