In this tutorial, we will learn how to create buttons to show or hide content using the free version of Elementor. The example we will see is the creation of two buttons that toggle the visible content on a page. Let's start!
Design Preparation
-Open your page in Elementor or create a new one.
-Create the desired structure, such as a container with an image, a button, and a content area that you want to show or hide.
Class Assignment
-In the button widget, go to the “Advanced” tab and define a class, for example, “button-show-hide-1”.
-In the container that contains the content to show or hide, go to the "Advanced" tab and define another class, for example, "content-1".
Custom HTML Code
-Add an HTML widget inside the container with the image and the button.
-Copy and paste the script that you will find at the end of the tutorial:
Initial Visibility Settings
-Go to "Appearance" and select "Customize".
-In the "Additional CSS" section, add the CSS code that you will find at the end of the tutorial.
Duplication for Additional Buttons (Optional)
If you want to create more buttons to show and hide additional content, duplicate the container and repeat steps 2 and 3, making sure to change the corresponding classes and numbers (for example, "button-show-hide-2" and "content-2 »).
Result
By performing these steps, you will have created buttons that toggle the visibility of content on your page. You can repeat the process to add more buttons if necessary.
I hope this tutorial was helpful to you! If you liked it, don't forget to like and subscribe to the channel for more tutorials. If you have questions or concerns, leave them in the comments. Until next time!
If for this tutorial you need a plugin you can find it in the plugin page.
