[heading size=”h2″ style=”uk-module-title”]Accordions[/heading]
To hide or show text in a retractable panel, use the [accordion] shortcode. You can switch between having a single open item or multiple open items by setting the collapse parameter to true or false.
[line_break/] [heading size=”h3″ style=”uk-module-title”]Single open item[/heading] [accordion collapse=”true”] [accordion_panel title=”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.[/accordion_panel] [accordion_panel title=”Are you available for freelance work?”]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.[/accordion_panel] [accordion_panel title=”Is there documentation available for this theme?”]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, no sea takimata sanctus est At vero eos et accusam et justo duo dolores et ea rebum[/accordion_panel] [/accordion][line_break/] [badge style=”note uk-margin-top”]markup[/badge] [code][accordion collapse=”true”] [accordion_panel title=”title”]your content here[/accordion_panel] [accordion_panel title=”title”]your content here[/accordion_panel] [/accordion] [/code][line_break/] [heading size=”h3″ style=”uk-module-title”]Multiple open items[/heading] [accordion collapse=”false”] [accordion_panel title=”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.[/accordion_panel] [accordion_panel title=”Are you available for freelance work?”]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.[/accordion_panel] [accordion_panel title=”Is there documentation available for this theme?”]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, no sea takimata sanctus est At vero eos et accusam et justo duo dolores et ea rebum[/accordion_panel] [/accordion][line_break/] [badge style=”note uk-margin-top”]markup[/badge] [code][accordion collapse=”false”] [accordion_panel title=”title”]your content here[/accordion_panel] [accordion_panel title=”title”]your content here[/accordion_panel] [/accordion] [/code] [line_break/] [divider/] [line_break/] [heading size=”h2″ style=”uk-module-title”]Toggles[/heading]
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 'open’ option to true; To have the toggle closed by default, set the 'open’ option to false
[heading size=”h3″ style=”uk-module-title”]open toggle[/heading] [toggle open=”true” title=”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.[/toggle] [badge style=”note uk-margin-top”]markup[/badge]
[code][toggle open=”true” title=”Your toggle title here”]Your toggle content here[/toggle][/code][line_break/] [heading size=”h3″ style=”uk-module-title”]closed toggle[/heading] [toggle open=”false” title=”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.[/toggle][line_break/] [badge style=”note uk-margin-top”]markup[/badge] [code][toggle open=”false” title=”Your toggle title here”]Your toggle content here[/toggle][/code][line_break/] [heading size=”h3″ style=”uk-module-title”]Toggle with code[/heading]
You can also use the toggles to show/hide code snippets by wrapping the content with <code>
[toggle_code open=”false” title=”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>[/toggle_code] [badge style=”note uk-margin-top”]markup[/badge]
[code][toggle_code open=”false” title=”Show code”]Your toggle code here[/toggle_code][/code][line_break/]
