The Toggle Content element gives you full control over your content. It’s adding the toggle or accordion effect and making a creative FAQ page. It’s compatible with repeater, ACF and metabox.
Activate The Element
At first, you will activate the Toggle Content element from your Dashboard -> Zion Builder -> ZiUltimate page. Under the General Elements tab, you will get the elements list. Select the Toggle Content element and save the settings. Toggle Content will show on Zion Builder editor and you can use it.
How Do You Use
On Zion Builder editor, you will get 3 elements: Title, Toggle Content, and Toggle Button under the Toggle Content category.
At first, you will add the question or title section with the Title element. It is accepting the nested elements like text, heading, icon, etc Zion’s element.
For the animated close button, you should use the Toggle Button element and put it inside the Toggle Content -> Title element.
After this, you will add the Toggle Content element just below the Title element. You will get the “+” button and add the elements one by one and create your content(answer).
The structure should be like this:
Review the complete video below.
Setting Accordion Effect
You can make the accordion effect also. You will select the top outer wrapper. As per the above image, here is my top outer wrapper is the “SECTION” element. Click or select the top outer wrapper, you will get the settings “Toggle Content Option” just like the attached image. Enable the accordion option and publish the page.
The Toggle Content Options feature is available for the Section, Column, and Container elements and it will show when you will activate the Toggle Content element.
Repeater/ACF/Metabox
You can show the dynamic data. This element is fully compatible with a repeater, ACF repeater, and custom fields. Here I am showing the WooCommerce product with Repeater -> Query Builder provider:
How Add FAQ Schema
Please check out this video.
Later you will add this JS code in your Dashboard -> Zion Builder -> Custom Code -> Footer Scripts
<script type="text/javascript">
jQuery(document).ready(function($){
$('html').attr('itemscope', '');
$('html').attr('itemtype', 'https://schema.org/FAQPage');
});
</script>Tips
Very tough to provide the UI for more styles. But you can make an interactive design with small custom CSS code. If you want a more visual appearance for the Active state, you will get two CSS class names: zu-toggle–active and zu-toggle-title–active. Using these two CSS class names, you can target the activate toggle item and make the custom CSS.