Share Your Thoughts

Toggle Content

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.

Toggle Content element

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:

Structure Panel

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.

Enable the accordion effect from outer wrapper

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:

Showing repeater data

How Add FAQ Schema

Please check out this video.

Adding FAQ Schema

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.