Shortcodes

Toggles

To hide or show text in a retractable panel, use the [toggle] shortcode. A good example of how the toggles can be used is in createing a Frequently Asked Question section by using multiple toggles. To have the toggle open on page load, set the state option to open; To have the toggle closed by default, set the state option to closed

open toggle

  • How can I find happiness?

    Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.
markup
[toggle state="open" title="Your toggle title here"]Your toggle content here[/toggle]

closed toggle

  • How can I find happiness?

    Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.
markup
[toggle state="closed" title="Your toggle title here"]Your toggle content here[/toggle]

Toggle with code

You can also use the toggles to show/hide code snippets by adding the code state to the toggle

  • show code

    <ul> <li class="uk-nav-header uk-navbar-nav-subtitle">Menu Heading<div>Subtitle possible</div></li> <li><a href="#">[icon style="icon-envelope-o"/] Menu Icon</a></li> <li><a href="#">[icon style="icon-heart-o"/] Another Menu item</a></li> <li class="uk-nav-divider"></li> </ul>
markup
[toggle state="closed code" title="Your toggle title here"]Your toggle code here[/toggle]

Nested Toggles

You can also add toggles within toggles by using the [child_toggle] shortcode within the [toggle] shortcode.

  • Can toggles support child toggles?

    Yes I am! just contact me using the contact form on the right and indicate your budget and a detailed scope of your work. For theme customization my hourly rate is $65.
    • This is a child toggle A

      A. Yes, a full documentation is available! Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
    • This is a child toggle B

      A. Yes, a full documentation is available! Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
    • This is a child toggle C

      A. Yes, a full documentation is available! Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

markup
[toggle state="closed" title="Toggle title"]some text here
[child_toggle state="closed" title="child toggle A"]some text here[/child_toggle]
[/toggle]