Step-by-Step Guide to Creating a Toggle Element in ClickFunnels 2.0

| 25 June 2024

25 June 2024

jozill

 Broken Links
Creating interactive elements is key to engaging your audience and enhancing their experience.  Toggle elements are especially useful for displaying FAQs, allowing users to reveal answers with a click. While ClickFunnels 2.0 lacks a native toggle element, you can still achieve this functionality with some simple steps. In this guide, we will show you how to create a custom toggle element in ClickFunnels 2.0, making your content more dynamic and organized. Before we proceed, here are the main elements that we are going to use in creating the custom toggle element in ClickFunnels 2.0
  • Subheading – This is what we will use as the toggle title
  • Paragraph – This is what we will use as the toggle body
  • Divider – This is the element that separates one toggle from another

Step-by-Step Guide

Step 1: Preparation

  • Make sure that you already have your section and row placed

Step 2: Adding and Configuring the Subheading

  • Add the first Subheading
  • Go to the Subheading’s setting and activate “Icon After” then select the “fas fa-angle-down” icon
  • Go to the advanced settings and add a custom attribute: “data-title” with the value “faq-1”
Toggle
This screenshot shows where to set the name and the value of the custom attribute. 

Step 3: Adding CSS Code

  • Go to the Settings tab of the funnel page and select “<> Show Code”
  • Paste the following CSS code into the {} CSS tab:
What this code does is it calls the subheading’s data-title that has “faq” as part of its value and points to the specific element inside the subheading which in this case is the data-page-element=”IconNode” and puts it to the right-hand side of the subheading element with respect to its padding. We will discuss the second part of this code later. For now, let us proceed to the next step.

Step 4: Adding the Paragraph Element

  • Add the Paragraph element below the Subheading
  • Go to its advanced settings and add a custom attribute: “data-title” with the value “answer-1”
Toggle 01
This screenshot shows where to set the name and the value of the custom attribute. 

Step 5: Adding the Divider Element

  • Add a Divider element below the paragraph element
  • Style it however you want, and we would suggest for you to keep the padding-top and padding-bottom to 10px so you can select it more easily later

Step 6: Hiding the Paragraph Element

  • Go to the paragraph’s settings and set its visibility to “Hide in all devices” 

Step 7: Adding JavaScript Code

  • Go to the Settings tab, select “<> Show Code”, and go to the </> Footer Code panel
  • Paste the following JavaScript code:
What this code does is tell the subheading’s data-title with part of its value as faq that when it is clicked, it should show the corresponding data-title with part of its value as answer. This gives the subheading and the paragraph elements the toggle function. The next part of the code is calling the icon of the subheading element and giving it the class iconRotate to have the icon rotate at 180 degrees when the subheading element is clicked.

Screenshots

Here are screenshots of how it is supposed to look after you have typed in your toggle title, and body. You can style yours however you want but for reference, here is what we have created for one of our clients:
Toggle 02
This screenshot shows the closed state of the toggles. Notice the icons as they are pointing downwards.
Toggle 03
This screenshot shows what happens when you click on the toggle title. This time, the icon is already pointing upwards, and the paragraph element is now showing. 
You can add additional subheadings, paragraphs, and dividers as needed. For subsequent subheadings and paragraphs, ensure the custom attribute values increment accordingly: faq-2, faq-3, faq-4, etc., for subheadings, and answer-2, answer-3, answer-4, etc., for paragraphs. By following these steps, you can create a custom toggle element in ClickFunnels 2.0, ideal for organizing and displaying FAQs. Experiment with further customizations to make the toggle elements fit seamlessly with your site’s design.

Sources

This tutorial was inspired by a YouTube video on creating toggle elements in ClickFunnels 2.0. For more detailed visual instructions, you can watch the original video here.

You might also like these blogs and articles

Myth

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to Our Newsletter for Updates

Stay in the loop and receive exclusive offers!

"*" indicates required fields

Name*
Hidden
Privacy*