# j-ToggleMore

> Je to jednoduchý komponent na prepínanie obsahu.

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

Je to jednoduchý komponent na prepínanie obsahu.

- CSS môžete zmeniť pre svoje potreby.


__Metódy__:

- `component.toggle(force)` môže prepínať komponent. Parameter `force` je voliteľný a vynúti hodnotu. napr. `component.toggle(true);` zobrazí `ui-togglemore-after`.

__Je dobré vedieť__:

Obsah `j-ToggleMore` je rozdelený na 2 časti: `before` a `after`. Každá časť musí byť definovaná. Komponent pridáva do každej časti triedy CSS, napríklad prvý `div` bude obsahovať `ui-togglemore-before` a druhý `ui-togglemore-after`.
Aby ste predišli "blikaniu", pridajte triedu `hidden` k druhému `div`.

---

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

Použite ho so `<ui-component name="togglemore">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Denis Granec. Zdroj: úložisko komponentov 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>
```