The Content Toggler Block allows your website viewers to toggle the visibility of content with a single button click. It enhances user experience by providing a clean and organized interface, allowing visitors to focus on relevant information without distractions. Whether it’s revealing hidden sections or displaying additional details, the Content Toggler Block simplifies content presentation and promotes a more intuitive experience.
Implement the Content Toggler Block to streamline content display, enhance interactivity, and provide an easy way for users to access longer sections and more information on your website.
Example:
Below is an example of the Content Toggler block for your WordPress editor. Click the “Show More” button to show and hide the content within the block.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec magna eget tortor ultrices laoreet eu id velit. Maecenas aliquam massa eu leo dapibus, vel feugiat est fermentum. Sed leo ex, laoreet in imperdiet eu, maximus eu enim. Mauris vitae diam et dui dictum rhoncus. Nullam sit amet consequat eros, quis mollis nisi. Curabitur suscipit finibus vestibulum. Cras cursus nisi quis massa hendrerit aliquam. Aenean ac pretium nulla.
Pellentesque rutrum gravida felis quis maximus. Nunc congue convallis arcu, nec consectetur nibh facilisis id. Aenean sit amet dui imperdiet, porttitor erat vitae, scelerisque lacus. Sed et enim lobortis, consectetur justo et, rutrum erat. Quisque viverra dui vitae malesuada pulvinar. Vestibulum non tempor justo. Integer nec ornare turpis. Duis ut fringilla quam, ac fringilla erat. In ornare elementum risus, non condimentum orci condimentum at. Cras id nulla libero. Integer mattis, eros vel elementum mattis, felis leo tincidunt arcu, non pharetra odio purus id sapien. Nunc pellentesque blandit purus eu feugiat. Ut eget interdum augue. Quisque maximus dapibus ipsum, id faucibus ex porta quis. Sed risus elit, vehicula ut faucibus ut, elementum eget turpis.
Quisque eget auctor sapien, sed dictum magna. Mauris lobortis congue elit et fermentum. Etiam id venenatis orci. Integer et leo mattis, gravida ex id, finibus ante. Maecenas malesuada faucibus metus eu tincidunt. Morbi ullamcorper porttitor nibh, vitae ornare lectus mollis imperdiet. Sed ut magna volutpat, commodo justo eu, mollis tortor. Donec finibus metus non egestas laoreet.
Adding the Content Toggler block to WordPress
To add the Content Toggler block to your page, either start typing “/content ” or add by using the WordPress editor GUI interface and adding it there.
Or you can add the Content Toggler block by using the WP blocks Sidebar options.
Editing the Content Toggler block
Once you’ve added the Content Toggler block to your WordPress page, you will see a very simple version of the block with minimal design, looking like this:
The settings for the Content Toggler block are very simple and can be found in the right-hand sidebar settings section.
You can change the text for the Toggler button by either using the settings in the Sidebar, or by clicking directly on the button within the content area.
There is also a “Force Closed” button which will set the Content Toggler block to always stay closed, this is so you can edit the button text without the Toggler opening and closing.
You can add any inner blocks to the section you want to show / hide for your site viewers when using this block.
There are 3 options for the design of the Toggle button, you can either have it as plain text, as a button or as a full width banner, and then you can also further customize the design and colors to suit your website.
