j-ToggleMore

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

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.

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

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>