Accordions
To hide or show text in a retractable panel, use the tm-accordion uk-accordion class. You can switch between having a single open item or multiple open items by setting the collapse attribute to true or false.
Single open item
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.
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.
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
markup
<div class="tm-accordion uk-accordion" data-uk-accordion="{collapse:true}">
<h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>Your title goes here</h3>
<div class="uk-accordion-content">
Your content here
</div>
<h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>Your title goes here</h3>
<div class="uk-accordion-content">
Your content here
</div>
</div>
Multiple open items
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.
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.
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
markup
<div class="tm-accordion uk-accordion" data-uk-accordion="{collapse:false}">
<h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>Your title goes here</h3>
<div class="uk-accordion-content">
Your content here
</div>
<h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>Your title goes here</h3>
<div class="uk-accordion-content">
Your content here
</div>
</div>
Toggles
To hide or show text in a retractable panel, use the tm-toggle uk-accordion class. 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 'showfirst' option to true; To have the toggle closed by default, set the 'showfirst' option to false
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
<div class="tm-toggle uk-accordion" data-uk-accordion="{showfirst:true,duration:300}">
<h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>Your title goes here</h3>
<div class="uk-accordion-content">your content goes here</div>
</div>
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
<div class="tm-toggle uk-accordion" data-uk-accordion="{showfirst:false,duration:300}">
<h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>Your title goes here</h3>
<div class="uk-accordion-content">your content goes here</div>
</div>
Toggle with code
You can also use the toggles to show/hide code snippets by using the tm-toggle-code class and wrapping the content with <code> element
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
<div class="tm-toggle tm-toggle-code uk-accordion" data-uk-accordion="{showfirst:false,duration:300}">
<h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>Show code</h3>
<div class="uk-accordion-content">
<code>your toggle code goes here</code>
</div>
</div>
