In this tutorial, we'll learn how to create buttons to show or hide content using the free version of Elementor. The example we'll look at is creating two buttons that toggle the visible content on a page. Let's get started!
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 be shown or hidden, 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 button.
-Copy and paste the script you will find at the end of the tutorial:
Setting Initial Visibility
-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 classes and numbers accordingly (for example, “button-show-hide-2” and “content-2”).
Result
By completing 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 needed.
I hope you found this tutorial useful! If you liked it, don't forget to give it a thumbs up and subscribe to the channel for more tutorials. If you have any questions or doubts, leave them in the comments. See you next time!
If you need any plugin for this tutorial you can find it in the plugins page.
