This post details how to create your own Toggle Shortcode. It has a special feature which is the ability to link to any Toggle in “Open Mode” (with the content displayed).

Special feature: Link directly to any Toggle using a “shortname” to display the toggle content in “Open Mode”.

I found many posts online detailing how to create a Toggle shortcode for my WordPress website. But I could not find a solution to the problem of wanting to link to a specific Toggle where the content would be displayed/open when the page was loaded. So I experimented and managed to find a way to do so. Details are below. You can of course also add an anchor reference and use that to just directly to that location on the page. On my own site, the FAQ page makes use of the Toggle shortcode and I have many references to the direct questions throughout the site.

Example:

[toggle title=”Toggle Title1″ shortname=”toggle1″] This is the toggle content[/toggle]

[toggle title=”Toggle Title2″ shortname=”toggle2″] This is the toggle content [/toggle]

To link with the Toggle Title2 content expanded, use this link:
http://mosaikweb.com/toggle-plus-shortcode?toggle2

The Toggle Shortcode used for the example above was:
Toggle Shortcode

To implement this toggle shortcode on your own, follow these four steps:

  1. Add code to your theme’s function.php file
  2. Add code to a custom .js file (a link will be required to this .js)
  3. Add/update CSS
  4. Upload the toggle images (“+”, “-“) to your theme’s image directory

Everything is provided below.

#1 Add code to your theme’s function.php file
togglephp

#2 Add code to a custom .js script file, and be sure to add a link to that file in your site’s header
togglecustomjs

#3 Add/update CSS
CSS for Toggle shortcode

#4 Add this image to your theme’s image subdirectory (as indicated in the CSS)
toggle icon

That’s it! You are ready to add the Toggle shortcode to your pages and posts.