The Ultimate Toggling Machine.

Toggler lets you toggle any part of your page (and I do mean any part), from within the page/post content. Using simple shortcode. This page usually has more content around … (click on the title for some external action).

 

Lets toggle stuff back : Right SidebarComments and the Header.

 

New in v3.1!

> Font Awesome Support!
+ Font Toggle!

This example is of External Toggling will be described later, first, lets see what can be done internally. All the togglings on this page were done with Toggler.

 

Coming Soon!

> More Themes!
> Hotkeys. 

You can add icons to your toggling action, you can choose to activate Togglers by hovering over them or clicking them, you can group several Togglers together, ghost Toggle, inline Toggler and more. Make sure to go through the tutorial to see all the features, and if you see something missing – let us know!

 

To get you started quickly, try this code for instant toggling action (or continue reading to find many more features) :

[toggler theme="boxed-black" title="Toggler Title"]Add Your Content here[/toggler]

 

Which will produce this :

Add Your Content here

 

Or, this : 

[toggler theme="framed-light" title="Toggler Title"]Add Your Content here[/toggler]

 

To get this :

Add Your Content here

 

BTW, all the widgets (including the image at the top), were generated with Widgedi!, Boxes with Boxify, Title with Titler – don’t forget to check those cool tools out!

This are togglings that we do inside the the Post/Page content area. We can toggle anything we want here, for example :

 

The code for this example is : [toggler role="switch" connector="inpage"] Click to Toggle some Text[/toggler]

[toggler role="target" connector="inpage"] The code for this example... [/toggler]

So, what do we have here ?

 

The Toggling Action is being done by 2 Toggler elements, a Switch and the Target. The Switch is the element you click on in order to toggle to Target. you define the elemets by adding role = “switch” or role = “target” respectively.

 

How does the Switch knows which Target to toggle ? For that, we  use a connector atrribute. Once we give the Switch a Connector key, it goes and look for Target elements with the same Connector key.

 

we assign a Connector Key by adding connector = “a-key” in the Switch shortcode and in the relevant Target. And, That’s it! for a simple toggle.

 

Don’t forget to close each element with a close toggler tag, [/toggler] – or else it just won’t work.

 

Inline Toggle

Inline toggling is when all the action is done in the same line. For example, how much is 4 + 7 ? click here to find out! umm, 13? As you can see, no new paragraph was started for this. But, all the content was shifted to make room for the hidden target. We solve this in the next example.

 

But before that, How do we Achieve the inline toggling  ?

 

We simply add inline=”yes” in our Toggler Shortcode. Which might look something like :

[toggler role="switch/target" connector="riddle" inline="yes"] some text [/toggler]

 

Right now, the Inline Toggling feature is a bit inconsistent with IE. Working on it… expect a solution soon.

 

Non-Ghost Toggle

Ghost toggle is when we hide a section, and the content around it collapses (Like the first example). A Non-Ghost Toggling, is the exact opposite. When we hide the element, the content around it does not collapse. We can achieve a non ghost toggle by adding ghost = “no” to the shortcode. Here is an example :

 

As you can see, there is a hefty piece of empty real estate just below this paragraph. The reason, is that the target is hidden in that space. To see the content Click here.

Casper The Friendly Ghost

You can toggle any part of the page – if you know its id or class, it Togglable. The Examples at the beginning is External Toggling. The Switches inside the Post/Page, control the elements that are external to the content (the header, sidebars, comments, widgets – etc).

 

You can convert External Elements to Switches and point them to Targets inside the post, if you want to Toggle Internal elements using External elements.

 

With enough creativity, you can create impressivly modular designs.

 

How to do External Toggling (External Targets) ?

 

For toggling external targets using internal switches you have to create only a Switch element (role=”switch”), the external element will act as the Target element. So you don’t need to create a new one. In order to properly connect the Switch to the external Target, you need to find a unique identifier for that external element (you don’t want your switch to go wild and toggle other elements, right ?).

 

The unique identifier can be either its id attribute, or a unique class name. The easiest way to explain this is with an example : On this theme, the comments are caontained in a divider box that has the id=”respond” (if you look at the source of this page, you’ll find a div id=”respond”which is the divider that contains the comments).

 

So, in this case, my identifier would be “respond”. In order to let my Switch know that it has to toggle the div that its id is “respond”, I add in the shortcode ext = “id:respond”. Now, my Switch knows that it has to toggle an external element with the id respond.

 

if instead of an id it would have been a class, then the added code would look like – ext = “class:respond”. The entire needed shortcode for toggling my comments area is -

 

[toggler role="switch" ext="id:respond"] the link text [/toggler]

 

How to do External Toggling (External Switches) ?

 

To toggle internal content using external elements, you only have to create a Target element using the role = “target”. In order to create the Switch, you need to tell Toggler which external element you want to act as a Switch. 

 

Same as with External Targets, you need to find the id or class of that element, and add it to the Target element you just created under the attribute ext. so, for example, if you want the comment area (id=respond) to control internal content, the code would look like this :
 

[toggler role="target" ext="id:respond"] the internal content [/toggler]

 

Easy, eh ?

With Toggler you can also group you Togglers to achieve on of the following effects :

 

  • Focus Toggling - which basically means that Togglers keeps only the current target in a group in focus, while hides the rest of the targets (example in the next paragraph).
  • Multi Toggling - toggle several targets with one switch, or with several switches.

Focus Toggling

Here is an example of focus toggling :

 

Content #1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Content #2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Content #3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 

As you can see, only one target is kept visible at all time. Achieving this is pretty simple, and done with the ‘group’ attribute. Which tells Toggler which Switches/Targets to group together. Just add this attribute to your shortcode, and give a name to that group.

 

You need to add this attribute in the “Switch” and in the “Target” elements.

 

The code for the above example is as follows :

 

[toggler role="switch" connector="focus-1" group="focus-toggling"]> Switch #1[/toggler]
[toggler role="target" connector="focus-1" group="focus-toggling"]Content #1[/toggler]
[toggler role="switch" connector="focus-2" group="focus-toggling"]> Switch #2[/toggler]
[toggler role="target" connector="focus-2" group="focus-toggling"]Content #2[/toggler]
[toggler role="switch" connector="focus-3" group="focus-toggling"]> Switch #3[/toggler]
[toggler role="target" connector="focus-3" group="focus-toggling"]Content #3[/toggler]

 

Multi Toggling

Multi toggling is the ability to control multi targets with one or more switches. For Example :

 

Content #1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Content #2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Content #3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 

To Multi toggle you don’t need to use the ‘group’ attribute – you can achieve multi toggling by assigning the same connector to different targets, so a single (or several) switch can control all of them.

 

The code for the example above looks like this :

 

[toggler role="switch" connector="focus-4"]> Switch #1[/toggler]
[toggler role="target" connector="focus-4"]Content #1[/toggler]
[toggler role="switch" connector="focus-4"]> Switch #2[/toggler]
[toggler role="target" connector="focus-4"]Content #2[/toggler]
[toggler role="switch" connector="focus-4"]> Switch #3[/toggler]
[toggler role="target" connector="focus-4"]Content #3[/toggler]

Instead of toggle stuff by clicking on the Switch, you might want to toggle the Target just by hovering over the Switch. You can achieve this by using the hover attribute. Just set the attribust to hover = “yes”, and the Switch will respond once you hover over it with the cursor.

 

For Example :   SwitchTarget 

 

And the code for this example :

[toggler role="switch" inline="yes" hover="yes" connector="hover"]Switch[/toggler] ... [toggler role="target" inline="yes" connector="hover"]Target[/toggler]

You can also add icons of your choice, position and resize them to your liking – and let Toggler make them switch once a Switch is clicked/hovered. If you don’t have an icon, or just want an instant ‘icon-like’ action, Toggler will generate a +/- kind of icon (same as shown above), and will give you control over its coloring, positioning and size.

Let Toggler add a +/- icon for you

If you just want a simple +/- to show up beside your togglers, you can use the icon = “plus” attribute. Toggler will create an “icon” with black background and white text, and position it 5 pixels to the left of the text. for example :

 

+-The SwitchThe Target

 

The code : 

[toggler role="switch" connector="icon-plus-1" icon="plus" inline="yes"]The Switch[/toggler] ... [toggler role="target" connector="icon-plus-1" inline="yes"]The Target[/toggler]

 

If we are not happy with the default icon, we can furthermore control the positioning, color and size of our plus icon using the following attributes :

  • icon_size – that controls the diameter of our plus icon, accepts any number, and should be in pixels. default is 18 pixels.
  • icon_color – thats the color of our plus/minus, accepts hex (#000 for black), rgba (rgba(255,255,255,1) for white) and any color name you can think off. default is white.
  • icon_background – the background color of our plus icon. accepts same format as the previous attribute. default is black.
  • icon_left – the distance (in pixels) from the text to the icon. default is 5 pixels.
  • icon_top – the distance (in pixels) from the top of the line, you might finding your self needing to play with it, as the text size of different togglers might vary (you’d might to use a big font heading as a toggler or some small text in the content). default is 0. accepts negative numbers.

 

Let’s look at another example : 

 

+-The SwitchThe Target

 

And the code :

[toggler role="switch" connector="icon-plus-2" icon="plus" inline="yes" icon_size="16" icon_color="yellow" icon_background="blue" icon_left="20" icon_top="-4"]The Switch[/toggler] ... [toggler role="target" connector="icon-plus-2" inline="yes"]The Target[/toggler]

 

Add your own icon

If you got your own beautiful Toggling action icons (gotta have 2, one for ‘open’ and one for ‘close’), you can add them simply by using the Add Media button just above the Edit Post text field. After you add the icons, you’ll have to give them a name, and let Toggler know it, so it can grab them and add them to the Togglers.

 

Here is a Step-by-step instructions on how to do it :

  1. Upload both icons to WordPress using the Add Media button (top-left above the Edit Post area).
  2. Once both icons are uploaded, look for the ‘Toggler Icon’ text field in the Add Media window that pops up (should be below the ‘Link URL’ field).
  3. Give a name to those icons, anything you can think of. lets say icon-example, add to the end of that name -show for the icon that once clicked on will show the content, and -hide for the icon that’s hide the content. so the format is something like this ‘name-show/hide’. in our case, it will be icon-example-show for the icon that acts as the Plus icon from before, and icon-example-hide for the icon that acts as the Minus icon.
  4. Hit the ‘Save’ Button!
  5. Go back to the Edit Post field and add the name you gave the icons (in our case icon-example to the icon attribute of toggler.

 

For Example :

The SwitchThe Target

The SwitchThe Target

The SwitchThe Target

 

The code :

[toggler role="switch" connector="icon-1" icon="icon-example" inline="yes"]The Switch[/toggler] ... [toggler role="target" connector="icon-1" inline="yes"]The Target[/toggler]

 

Obviously, there is no need to add background color or text color to the icon – but you can change its size and positioning using the same attributes that are described in the Plus icon part icon_sizeicon_topicon_left.

 

You can add as many pairs of icons as you want, just give them different names and voila!

 

Handling block style Switches

In some cases, you’ll have no chance and use Switches with elements that are styles block, which means that the leave no room to add an icon too (you’ll notice it if the icon and the element won’t be on the same line). To solve this, Toggler has an attribute called icon_position, which once set as float, it will put the icon over our Switch, but will shift it to 5 pixels to the left of it.

 

By default this attribute is set to not really care about it. so use it only if you encounter a problem where your icon and the Switch just refuse to be on the same line.

 

Resetting Theme global styling

On most Themes, images in posts are automatically styled (borders, padding, etc). Toggler, by default resets this styling, so the icons won’t suffer from it. If you want to keep your Theme’s styling on your icons as well, use icon_reset attribute, and just type ‘no’ – ie, icon_reset = “no”.

 

With Toggler you can also make the Switch’s text (or part of it) to change when it is being clicked / hovered (for example – ‘open’ / ‘close’). To do so, you need to use two attributes, for each text change (before and after) :

  • First, is text_show is the attribute you use in order to tell Toggler what text to show in the Switch that once clicked on will show the Target. for example – text_show = “open”.
  • Second, is text_hide, and its the text that will be shown in the Switch, that when clicked on, will hide the Target. for example – text_hide = “close”.

 

Last thing you need to do, is tell Toggler where to put this text in the Switch. You do it by adding the word @replace in the Switch text. Toggler will look for that word in the Switch, and replace it with the appropriate text.

 

For example :

Switch (click to opennow click to close!)Target!

 

And the code :

[toggler role="switch" connector="switch-text" inline="yes" text_show="click to open" text_hide="now click to close!"]Switch (@replace)[/toggler] ... [toggler role="target" connector="switch-text" inline="yes"]Target![/toggler]

If you just want to simply toggle content quickly, without a lot of control of the styling of your Switches – you can use Quick Togglers. Quick togglers lets you skip assigning connectors (which means, cannot do external toggling or multi-toggling), do create a quick toggler you’ll use role = “quick”

 

Lets see an example :

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 

And the code :

[toggler role="quick" title="Click here to Toggle!"]Lorem ipsum dolor sit ... erat volutpat.[/toggler]

 

That’s all is needed for a Quick Toggler. Just let Toggler know its a quick one by role = “quick”, and let it know whats the title of the Switch gonna be by using title = “the title”.

 

Styling the Switch 

You can also style the Switch’s title, if you want, by adding ‘@styling@’ at the begining between the toggler tags, and style only the word ‘styling’ – so toggler will pick the styling of that word and apply it to the title.

 

for example :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 

And the code for that :

[toggler role="quick" title="Click here to Toggle!"]@styling@Lorem ipsum ... erat volutpat.[/toggler]

 

What Features work with Quick Togglers ?

Most of the Toggler’s features work with quick togglers as well :

  • Hover Toggling, Ghost Toggling, Inline Toggling works, just add the attribute into the toggler tag (like shown in the tutorial above).
  • Icons work as well, just add the code as shown in the tutorial.
  • Switch Text Replace works too, you just need to add the @replace word inside the title attribute.
 
For example :
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 

The code :

[toggler role="quick" title="Click Here to @replace! : " text_show="Show" text_hide="Hide" icon="plus" ghost="no" icon_top="-2"]Lorem ipsum ... erat volutpat.[/toggler]

 

Toggler offers a collection of themes, for quick use. Themes work the same as Quick Toggler – only difference is that they are not bareboned, but have their own design.

 

Code to generate this Toggler : [toggler theme="boxed-black" title="theme = 'boxed-black'"]
Code to generate this Toggler : [toggler theme="boxed-white" title="theme = 'boxed-black'"]
Code to generate this Toggler : [toggler theme="boxed-gray" title="theme = 'boxed-black'"]

 

if you don’t want the ‘plus’ icon to show on boxed themed Togglers, add the attribute icon=”none”, and it will remove the ‘plus’ icon. Moreover, you can assign different icons using the same way you would add icon’s to any other toggler.

 

Following example is to show that grouping works on themed Togglers, even if you’re using a different theme :

 

Code to generate this Toggler : 

[toggler theme="boxed-gray" title="theme = 'columns-dark'" group="columns"]

Code to generate is the same as the previous.
Code to generate this Toggler : 

[toggler theme="boxed-gray" title="theme = 'columns-light'" group="columns"]

 
The “Boxed” Themes have by default a fading effect, the next themes have by default a sliding effect :
 
Code to generate this Toggler : [toggler theme="framed-dark" title="theme = 'framed-dark'" group="columns"]
 
Code to generate this Toggler : [toggler theme="framed-light" title="theme = 'framed-light'" group="columns"]

 

 

All the features that work with Quick Togglers, Work with this ones as well. 

Effects are different ways to display the toggling transition, Currently, Toggler supports three effects : toggle, fadeslide. Setting an effect is done by adding the parameter effect.

 

toggle is as simple as show and hide. Once the Switch is clicked/hovered, the Target, will immidiately toggle itself. By default, all Togglers are set on toggle effect. Setting it is by adding effect=”toggle”.

 

This is the content. Lorem ipsum dolor sit amet, duo malis regione molestie at. Ei vidit tractatos forensibus vim, ad atomorum complectitur mei. Ad mei scripta consequat conclusionemque. Cum ea commune molestie reformidans, omnes insolens recusabo ius ex.

 

And, the code :

[toggler role="switch" connector="effect-toggle" effect="toggle"]Click Here to Toggle[/toggler]

[toggler role="target" connector="effect-toggle"]This is the content...[/toggler]

 

fade adds a fading effect. Once the Switch is clicked/hovered, the Target, will fade itself. Setting it is by adding effect=”fade”.

 

This is the content. Lorem ipsum dolor sit amet, duo malis regione molestie at. Ei vidit tractatos forensibus vim, ad atomorum complectitur mei. Ad mei scripta consequat conclusionemque. Cum ea commune molestie reformidans, omnes insolens recusabo ius ex.

 

And, the code :

[toggler role="switch" connector="effect-fade" effect="fade"]Click Here to Toggle[/toggler]

[toggler role="target" connector="effect-fade"]This is the content....[/toggler]

 

slide will slide the target’s content up and down (to hide/show). Setting it is by adding effect=”slide”.

 

This is the content. Lorem ipsum dolor sit amet, duo malis regione molestie at. Ei vidit tractatos forensibus vim, ad atomorum complectitur mei. Ad mei scripta consequat conclusionemque. Cum ea commune molestie reformidans, omnes insolens recusabo ius ex.

 

And, the code :

[toggler role="switch" connector="effect-slide" effect="slide"]Click Here to Toggle[/toggler]

[toggler role="target" connector="effect-slide"]This is the content...[/toggler]

 

 

Nesting means having a toggler within a toggler target. For example :

And here inside you can see a nested toggler :

 

The SwitchThe Target

The SwitchThe Target

 

For nesting, you only need to replace the toggler shortcode name with toggler_nest for first level nesting and toggler_nest_two for second level. For example :

 

[toggler role="switch" connector="first-level"]> First Level Switch[/toggler]

[toggler role="target" connector="first-level"]> First Level Content :

[toggler_nest role="switch" connector="second-level"]>> Second Level Switch[/toggler_nest] [toggler_nest role="target" connector="second-level"]>> Second Level Content: 

[toggler_nest_two role="switch" connector="second-level"]>>> Third Level Switch[/toggler_nest_two]

[toggler_nest_two role="target" connector="second-level"]>>> Third Level Content[/toggler_nest_two]

[/toggler_nest]

[/toggler]

 

The Result : 

> First Level Content :

>> Second Level Content: 

>>> Third Level Content

 

That’s all, all the attributes in the documentation above apply to toggler_nest and toggler_nest_two exactly the same way they apply to toggler.

.

One time Togglers are meant to be used only one time. Which means they will toggle only once. For Example : 

 

This content won’t disappear!

 

To use a one-time toggler, use the attribute toggler_once = “yes”. This attribute works on Themes as well! 

 

The code for the above example is :

[toggler role="switch" connector="once" toggle_once="yes"]This will Toggle only once :[/toggler][toggler role="target" connector="once"]This content won't disappear![/toggler]

 

The above feature is included in the Shortcode Generator as well (the TinyMCE button), so you won’t have to write any shortcode.

.

Font Awesome, for those who don’t know already, is an awesome vector icons font that is available for free to use on your site (as long as you play by the rules of the license).

 

Toggler support Font Awesome as an extension of its icons support. to font awesome, toggler has 3 new attributes – which are straightforward and easy to implement :

  • icon-fontawesome, here you put the appropriate icon name (or class name, as “icon-font-name”, as appears in Font Awesome’s Icon List). so, for example – icon-fontawesome = “icon-dollar”, will display the dollar sign as Toggler’s Swtich icon.
  • icon-fontawesome-off, in case you want to use a icon that’s toggled, which means that’s its an icon that will change once the switch is being clicked – use this attribute to set the alternating icon.
  • icon-weight, in case you’d want the icon to be bolder use ‘bold’. by default its ‘normal’.

 

All the rest of Toggler’s icon attributes apply here (color, positioning, etc).

 

For example :

Add Your Content Here

 

The code for that example :

[toggler role="quick" title="Click Here!" effect="fade" icon_fontawesome="icon-cloud-download" icon_fontawesome_off="icon-cloud-upload"]Add Your Content Here[/toggler]

 

You can also used the rotated and flipped Font Awesome classes in addition to the icon’s class you added, for example : icon_fontawesome=”icon-cloud-download icon-rotate-90″, will display that icon rotated 90 degrees. More information at Font Awesome’s website.