Toggler. A WordPress Plugin.

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

Inline Toggle

Inline toggling is when all the action is done in the same line. For example, how much is 4 + 7 ?

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

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. 

Easy, eh ?

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

Focus Toggling

Here is an example of focus toggling :

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 :

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 :  

And the code for this example :

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 code : 

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 : 

And the code :

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 Switch

The Switch

The Switch

The code :

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_size, icon_top, icon_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 :

And the code :

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 :

And the code :

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 :

And the code for that :

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.

The code :

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.

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 :

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

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

+-Parent Level Toggler

And here inside you can see a nested toggler :

 

The Switch

…

The Target

The Switch

…

The 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]

The Result : 

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 : 

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 :

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