j-ToggleMore

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

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

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

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>