The Content Toggle element is a great way to organize a lot of content and still keep the page easier to scroll through so the page viewers will not have to scroll as much to see the information they need, and can choose to view what is relevant to them.
Please watch this video to learn how to use the Content Toggle Element:
To add the Content Toggle Element to your page, you can click the + icon or the +Elements link in the top left of the OptimizeBuilder.
To find the element quickly, just start typing in the search field and then drag the element over to the page:
One you add the Content Toggle element, you will see the left sidebar open up with some pre designed styling options. You can choose one of those and customize it, or start customizing the element from the inline toolbar (you can close the sidebar by clicking the arrow:
The Content Toggle element is different than our FAQ element which only takes text, as you can add more elements within the Toggle. Just click on a toggle to open it up and then you can drag elements inside of it like you see here:
We wouldn't suggest putting too much content in there, but this might be a good way to add a more detailed FAQ, How to guide, a video, or even different checkout forms. There are just about an infinite number of ways you can use this element.
If you click on one of the toggles, you can get to the main element toolbar by clicking "Content Toggle" in the editor breadcrumbs like you see here:
Once you click on "Content Toggle" (see above) then you'll see the Content Toggle inline toolbar
You can choose a predesigned element style by clicking the first icon in the element toolbar. This will open up the left sidebar where you may choose an element style.
Note that this will override the settings you currently have, but you can also click the "undo" icon in the editor if you need to revert back.
To add an additional Content Toggle Item, you simply click the + icon in the element toolbar
To align the element, click the align icon. You'll need to set the width of the content toggle to less than the width of the column or row that the element is added to in order for it to be aligned as selected. You won't notice any difference if the width is set the same as the column/row that the element was added to.
Clicking the toggle icon, you'll see there is an option to "Close other tabs" which can be set to no, or yes. The "No" option means that each Content Toggle item will stay open when clicked on. The "Yes" option turned on will only allow one Content Toggle item to stay open, and when opening the next item it will close the other that is open. This makes it easier to navigate through, but the choice is yours as we are aware of some use cases that would work well with the Content Toggle items remaining open.
To reposition the element to another location on your page, you can hold the crossarrows icon with your mouse and drag it where you want and drop the element in its new location.
You can also clone the element by clicking the clone icon
If you accidentally created an extra Content Toggle element, you can delete it by clicking the trashcan icon
The settings icon will allow you to add spacing above or below the element, and allow opening the Advanced Option
You can click the Advanced Options button to open the element sidebar.
Once you click on "Advanced Options" you'll see the element sidebar
Positioning - Here you can edit the margins and padding around the Content Toggle element.
Responsive - Here you can hide/show the element based on the device (if you hide on desktop and want to edit, you can click "show all hidden items" and then you'll see it)
Animation & Delay - Here you can select a trigger (page load, scroll to, etc.) and then choose what kind of animation you want. These effects will give your page a unique professional feel while someone is scrolling down the page. We do suggest not overdoing these options on every element though (to help avoid eye strain).
Advanced - Here you can grab the element ID, set custom element class (for CSS), change the Z-index, and use code before/after the element. Z-index is used in CSS to layer things on top of each other - giving an item a higher Z-index will bring the item on top of other items that have a lower Z-index.
To learn more about the code before/after, see our guide on this here (opens in new window): https://docs.optimizepress.com/article/2374-using-code-before-code-after-elements
Each Content Toggle item can also be adjusted. Just click on one of the Content Toggle items and you'll see a separate element toolbar with options specific for the Content Toggle items
To make edits only to one Content Toggle item, just click the padlock icon. This will unlock the item so any changes will only be made to that specific Content Toggle item
You can add a new Content Toggle item by clicking the + icon
You can click the toggle icon to adjust the item spacing, and icon position
You can also edit the text options for the Content Toggle item as well
If you need to change the icon used for opening and closing the Content Toggle item, you may do that by clicking the star icon
To adjust the colours, click the colour icon - Here you can change colours for the Header background, Content background, Text, and the Icon colour
You may adjust the borders and shadows by clicking the border icon
To adjust the hover colors for the Header background, Content background, text, and icon, just click the pointing finger icon
To reposition the item (change the order of the items) you just click and drag the cross arrows icon to do so - just release the mouse to drop it where you want the item to be.
You can also clone a Content Toggle item (instead of adding a new one if you want to make similar content areas in each toggle).
If you need to delete a Content Toggle item, just click the trashcan icon
To open the Content Toggle Item advanced options, simply click the gear icon and then click the blue "Advanced Options" button. This will open the left sidebar where you can adjust several options.
You can adjust positioning, Responsive, Animation & Delay, as well as other advanced options. Note that the code before/code after does not exist for "items" within an element such as this. The options here are similar to the overall element advanced options as well.
Click on the "Hover" tab to adjust some settings for the "hover" state
Under "General" you can change the transition duration
You can even adjust the Borders & Corners settings for the "hover" state as well
In conclusion, you can do a lot with the Content Toggle element. The biggest advantage is you can fit a huge amount of content on your pages and use this element to make the pages not look quite as long as they really are.
If you have any questions about the Content Toggle element, please reach out to our friendly support team and they will be happy to guide you further.
