# j-ToggleMore

> É um componente simples para trazer conteúdo.

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

É um componente simples para trazer conteúdo.

- Você pode alterar o CSS para suas necessidades.


__Métodos__:

- `component.toggle(force)` Pode ser usado o componente. parâmetro `force` É opcional e vai forçar o valor. `component.toggle(true);` Vai mostrar `ui-togglemore-after`.

__Bom para saber__:

O conteúdo do `j-ToggleMore` é dividido em 2 partes: `before` e `after`. Cada parte deve ser definida. o componente adiciona classes CSS a cada parte, por exemplo, o primeiro `div` contém `ui-togglemore-before` e o segundo `ui-togglemore-after`.
Para evitar o "blink", adicione a classe `hidden` ao segundo `div`.

---

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

Use-o com `<ui-component name="togglemore">`Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço `DEF.fallback` (a partir do Componentator CDN por padrão). autor: Denis Granec. fonte: o Componentator Reserva de componentes, licença 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>
```