jQuery Toggles

[header style=”” type=”h3″ id=”image-hovers”]Simple Toggles[/header] [padding size=”5″]

These are the attributes toggle can take:

type: Type of your toggle. It can be either ormal or boxed. See below for examples.
Options: normal, boxed — Default: normal
title: Title of your toggle. This is required.
Default: Don’t forget your title attribute!
initial: Initial state of your toggle
Options: open, closed — Default: closed
color: Color of your toggle
Options: (dee buttons page) — Default: white
id: Use an unique id to make a set of accordion toggles.
Default: none

[padding size=”10″] [header style=”” type=”h3″ id=”image-hovers”]Basic Usage[/header] [padding size=”5″] [sourcecode launguage=”plain”][[toggle type=”normal/boxed” title=”…” color=”…” initial=”open/closed” id=”…”] …
[/toggle]][/sourcecode] [divider_top text=””] [padding=”5″]

[toggle type=”normal” title=”Normal Toggle” color=”white”]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt congue quam ac iaculis. Ut eleifend tempus mi ac convallis. Nulla elementum pretium adipiscing. Pellentesque sit amet neque ac ligula lobortis aliquet. Nunc iaculis odio dolor, at viverra tellus. Maecenas ut lorem vitae felis lacinia pulvinar. Praesent leo risus, porta nec tempus et, lacinia vel enim. Mauris et faucibus lectus.

[/toggle] [toggle type=”normal” title=”Normal Toggle — Initial Open” color=”blue” initial=”open”]

[/toggle] [toggle type=”normal” title=”Normal Toggle” color=”light-blue”]

[/toggle] [toggle type=”normal” title=”Normal Toggle” color=”deep-blue”]

[/toggle] [toggle type=”normal” title=”Normal Toggle” color=”red”]

[/toggle] [toggle type=”normal” title=”Normal Toggle” color=”deep-red”]

[/toggle] [toggle type=”normal” title=”Normal Toggle” color=”pink”]

[/toggle] [toggle type=”normal” title=”Normal Toggle” color=”light-pink”]

[/toggle] [toggle type=”normal” title=”Normal Toggle” color=”hot-pink”]

[/toggle] [toggle type=”normal” title=”Normal Toggle” color=”orange”]

[/toggle] [toggle type=”normal” title=”Normal Toggle” color=”light-orange”]

[/toggle] [toggle type=”normal” title=”Normal Toggle” color=”aqua”]

[/toggle] [toggle type=”normal” title=”Normal Toggle” color=”gold”]

[/toggle] [get_the_code][sourcecode launguage=”plain”][[toggle type=”normal” title=”…” color=”…”] …
[/toggle]][/sourcecode][/get_the_code]

[toggle type=”boxed” title=”Boxed Toggle” color=”green”]

[/toggle] [toggle type=”boxed” title=”Boxed Toggle — Initial Open” color=”yellow” initial=”open”]

[/toggle] [toggle type=”boxed” title=”Boxed Toggle” color=”light-green”]

[/toggle] [toggle type=”boxed” title=”Boxed Toggle” color=”deep-green”]

[/toggle] [toggle type=”boxed” title=”Boxed Toggle” color=”brown”]

[/toggle] [toggle type=”boxed” title=”Boxed Toggle” color=”cream”]

[/toggle] [toggle type=”boxed” title=”Boxed Toggle” color=”chocolate”]

[/toggle] [toggle type=”boxed” title=”Boxed Toggle” color=”grey”]

[/toggle] [get_the_code][sourcecode launguage=”plain”][[toggle type=”boxed” title=”…” color=”…”] …
[/toggle]][/sourcecode][/get_the_code]

[divider_top text=””] [header style=”” type=”h3″ id=”image-hovers”]Accordion Toggles[/header] [padding size=”5″]

By adding an unique ID to your toggles an accordion effect is created.

[padding size=”10″] [toggle type=”boxed” title=”Toggle with ID ‘toggle-id'” color=”blue” id=”toggle-id”]

[/toggle] [toggle type=”boxed” title=”Toggle with ID ‘toggle-id'” color=”blue” id=”toggle-id” initial=”open”]

[/toggle] [toggle type=”boxed” title=”Toggle with ID ‘toggle-id'” color=”blue” id=”toggle-id”]

[/toggle]

Vilnius Guide

Things to Do, Travel Tips, Maps & Reviews

jQuery Toggles

Leave a Reply

Cancel reply

jQuery Toggles

Leave a Reply

Cancel reply

Login