# j-ToggleMore

> Is a simple component to toggle content.

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

Is a simple component to toggle content.

- You can change CSS for your needs.


__Methods__:

- `component.toggle(force)` can toggle the component. The parameter `force` is optional and will force the value. eg. `component.toggle(true);` will show `ui-togglemore-after`.

__Good to know__:

The content of the `j-ToggleMore` is divided into 2 parts: `before` and `after`. Each part must be defined. The component adds CSS classes to each part, for example first `div` will contain `ui-togglemore-before` and the second `ui-togglemore-after`.
To avoid "blink" add class `hidden` to the second `div`.

---

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

Use it with `<ui-component name="togglemore">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Denis Granec. Source: the Componentator components repository, MIT license.

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