Much like a magician, sometimes it’s wise not to show ALL of your content cards to online visitors at once.
Why?
Because in some content scenarios, it’s more useful to reveal your content instead.
In fact, strategic reveals can even be used to boost a particular conversion goal or make your content more engaging for readers.
But just like it is for a magician, presentation is important. So if you want to make your content reveals look professional, nothing makes that easier to do than the Toggle
element inside Thrive Architect and Thrive Theme Builder.
Want to learn 9 ways you can start using our Toggle element to strategically stage clever “Ta-da~!” moments within your own WordPress content?
Read on to see us reveal them all one... by... one…
More...
But First, What Does the Thrive Toggle Element Do?
Basically, the Toggle element is a unique kind of button: when pressed, it reveals content in a dropdown box:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus commodo nibh, ut elementum velit sollicitudin at. Donec suscipit commodo risus. Nunc vel orci eget ligula elementum consequat. Fusce velit erat, convallis scelerisque aliquet ut, facilisis egestas tellus. Quisque sit amet sapien placerat, ultricies sapien ut, vestibulum ex.
Looks simple enough, but this element is more powerful than you think.
Inside Thrive Architect (our page builder plugin) or Thrive Theme Builder (our WordPress theme), you have access to all sorts of features with it.
Like multiple-column and multiple-row toggles that can be set to "Auto-collapse" so no more than one toggle is ever open at the same time:
Your Toggle elements...
...as well as...
...can be setup to have up to 4 columns...
...an infinite number of rows.
On top of that, you can have toggles that Jumplink from anywhere on a page to a Toggle — and have your Toggle destination open immediately.
Click here to see this jumplink Toggle feature in action:
See how the jumplink scrolls down to this location and opens the toggle?
You can also have your Toggle elements automatically open as soon as your page loads (instead of being closed as is the standard Toggle element behavior):
And as you can probably tell by now, the Toggle element has several pre-designed templates to choose from with your Thrive editor window!
To access the Toggle element template library, first drop a Toggle element onto your Thrive Editor window. Then, click on the "Template" box under the Template Options left-sidebar tab. Finally, select your desired template from the popup lightbox that appears.
By showcasing these different features, this article will explain the many ways you can start using the Toggle element to its fullest potential.
But first, you’re probably wondering...
Are Toggle Elements SEO Compatible?
Let’s keep this answer short and sweet.
YES.
Toggle element content is part of the HTML code of your page — so it’s always readable by the search engines.
That means, even when a Toggle element's content isn't viewable by visitors (i.e. when it's closed), the search engine web crawlers can still read it to help index your pages.
So now that we’ve got that big question out of the way, let’s look at how you can start using Toggle elements to optimize your content for better conversions and engagement.
Starting with the most important use case of them all...
1. FAQ Sections for Sales Pages
If you’ve got a landing page actively selling products on your website, then nothing works better to display your Frequently Asked Questions than Toggle elements.
Instead of listing out a long line of static questions followed by answers — covering all the common customer questions and need to know information about your product — you can showcase the same content with better results using the Toggle element.
Just take a look at the FAQ section we put together for Thrive Theme Builder to get an idea of how you can use them for your sales pages or product launches:
Not only does a Toggle element FAQ section make your content more
skimmable to help readers find specific answers about your product, it elevates the overall production value of your sales page.
That translates into more trust in your product and better answered product questions resulting in more sales.
So if you’re not already using the Toggle element as the key Q&A reveal for your sales pages, it’s super easy to make that change with Thrive Architect right now.
2. Podcast Episode & Video Transcripts
Are you a podcaster or use video marketing in your business?
Then you already know that transcribing your podcast episodes and online videos into text is a great way to help generate more indexable online content for search engines.
Not only can you create dedicated summary pages for each podcast episode or video you publish (for example, check out all the video focused blog posts we create for the Thrive Themes blog as well as all of Shane & Hanne's dedicated podcast posts on ActiveGrowth), but you can also add your audio transcripts to those pages as well.
But don’t just do a dirty cut-and-paste job with the transcript text.
Use the Toggle element to nest your audio transcripts within your episode pages to boost readability and engagement.
Here's an example of how the ActiveGrowth podcast nests episode transcripts on dedicated posts for each episode.
This will make your dedicated podcast and video posts look more organized and appealing, which in turn helps boost both visitor and search engine engagement.
3. Table of Contents Display Toggle
Table of Contents Element Update
The Table of Contents element inside the Thrive visual editor now includes an open and close toggle feature.
This means you no longer need to use the Toggle element to achieve this functionality for your Table of Contents as described here in this post.
The Toggle element can also be used in other cool ways to streamline the look and feel of your content.
For example, if you want to hide a blog post’s Table of Contents on page load, you can nest it inside a Toggle element to give readers the option to hide or show such navigation links at their own discretion.
For example, here's how we did it for this very blog post above:
This can be especially useful for epic pieces of content that generate super long Table of Content elements. Instead of readers being forced to scroll past it before they can begin reading the main content of an article, they get to choose whether or not they want to see the quick navigation first:
Here's how the nested Table of Contents looks inside the Toggle element on our epic blog post about how to create ultimate guides.
4. Simple In-Content Quiz Questions
If you don’t want to go so far as adding actual conversion focused online quizzes within your content, you can use the Toggle element to create simple quiz questions for your readers instead.
Really, this can be as simple as asking a question through text in the top of the Toggle item and then revealing the answer in the clickable dropdown:
15 pre-designed Toggle templates and growing!
How cool is that?
What a simple way to boost reader engagement with your content!
5. Promote or Preview Your Online Courses
If you sell online courses, then the Toggle element can actually help you promote your products.
For example, Jon Morrow from SmartBlogger uses Toggles to showcase and make short sales pitches for his 5 different online course products — all on the same page:
Jon Morrow from SmartBlogger uses Toggle buttons to promote all 5 of his online courses on the same page.
Another strategy is to use the Toggle element to preview what's inside your online courses like Consulting.com does with it's Consulting Accelerator product:
The Consulting Accelerator online course sales page previews what's inside by using Toggles.
You can set up something very similar for your own online course sales pages using the Toggle element in Thrive Architect.
6. Payment Options + Shipping, Return and Refund Policies
If you’re selling anything online, then you definitely need to explain certain policy procedures, including:
- The different ways people can pay for your products
- How shipping and returns work (for physical products)
- How delivery and refunds work (for electronic products)
And once again, the Toggle element is a great tool to use for this so your customers can clearly see how you deal with each of these critical steps in your sales and post-sales processes.
Here's how one yoga studio deploys the Thrive Architect Toggle element to explain the different ways payment can be completed to attend online yoga classes:
You can use Toggle elements to help explain your payment methods just like this Namibian Yoga Studio is doing.
So if you have some sort of policy matter to explain on your website, make sure to use the Toggle element to get the right information conveyed both clearly and attractively to your visitors.
7. Step-by-Step Instructions
Let’s face it, sometimes explaining how to do stuff well can be hard to do.
That’s why most instruction pamphlets that accompany DIY furniture or new electronics are such a struggle to follow.
But one way you can keep from overwhelming your readers during step-by-step instructional procedures is by… you guessed it… using the Toggle element.
Again, instead of just listing some long, drawn out and hard-to-follow instructions, you can make life easier for your readers by breaking information up into discrete, toggleable steps. For example, I can use a Toggle element to explain how to use Toggle elements:
How To Use the Toggle Element in Thrive Architect:
Click on the ⊞ icon within the narrow right sidebar of your Thrive Editor window. After the right sidebar expands, search or scroll down the right sidebar to find the Toggle element icon.
Drag & Drop the the Toggle element icon onto your desired location within the Thrive Editor window.
With your Toggle element selected, open the "Template Options" tab found at the top of the left sidebar.
Click on the "Templates" button to open the Toggle element template library — a popup lightbox will appear.
Select the Template design of your choice and click the "Choose Template" button to continue.
With your Toggle template now loaded and highlighted, work your way through the different design option tabs in the left sidebar to modify all the different display features at your disposal (like Toggle behavior, Toggle element colors, font settings, layout pixel spacing, and more...).
With your Toggle element still highlighted, open the "Main Options" tab in your left sidebar and click the peach colored "Edit Toggle Items" button. The Thrive Editor window is now in the "Editing Toggle" mode and will allow you to edit the design and content of individual Toggle element items.
First modify the titles of each Toggle item.
Then add Text elements or any other right sidebar feature you need (like Image elements, Video elements, etc.) into the dropdown areas of your individual Toggle items.
Click the peach "Done" button to exit the "Editing Toggle" mode.
To expand individual Toggle items for editing, click on a Toggle item and then press the green "Expand" icon that appears within the Thrive Editor window. The Toggle item expand icon is located next to the Drag & Drop, Clone and Delete element icons that normally appear whenever you highlight something within the Thrive Editor window.
Or perhaps if you’re detailing the steps of a cooking recipe, the Toggle element can be used to make all of the ingredients, cooking-ware and action steps needed more clear:
How To Make Delicious "Egg-nana-jack" Pancakes:
- 1 over-ripe banana
- 2 eggs
- Coconut Oil
- Honey
- Limes
- Frying pan
- Mixing bowl
- Spatula
- Ladle
- Fork
- Serving plate
- Completely smush the banana in a bowl with your fork.
- Add the two eggs and mix them with the smushed banana using your fork. (don't whisk the batter!)
- Preheat your frying pan at a medium to high temperature.
- Add a small amount of coconut oil to your frying pan.
- Use a ladle to add an amount of batter to your frying pan that creates the shape of a pancake or flapjack.
- Once the bottom side of your Egg-nana-jack is golden brown, flip it over with your spatula to fry the other side.
- Add honey and lime juice to the top of each finished Egg-nana-jack and serve warm!
Not only will readers be able to easily skim through each step-by-step “headline” to get the 30,000 foot view of the full task, but they can also easily keep their bearings about which step they’re currently on if you activate the “Auto-collapse” toggle feature (only one toggle can be open at any given time).
8. Job Descriptions
If your business is growing quickly and you’re in need of hiring some additional team members to help out, the Toggle element can make creating an attractive job description page SUPER easy.
Instead of putting together some bland page that lists job descriptions in a long, unreadable fashion, the Toggle element allows you to organize and displaying each posting in an easy-to-find way:
Division of Company You're Hiring For (e.g. Marketing)
Add details about the position here like:
- Role Summary & Purpose
- Essential Responsibilities
- Qualifications & Requirements
- Desired Skills & Characteristics
Add details about the position here like:
- Role Summary & Purpose
- Essential Responsibilities
- Qualifications & Requirements
- Desired Skills & Characteristics
Add details about the position here like:
- Role Summary & Purpose
- Essential Responsibilities
- Qualifications & Requirements
- Desired Skills & Characteristics
See how quick the Toggle element gets hard jobs done?
9. Help Desk, Support and Tutorial Content
Finally, if your online products require customer support (and let’s face it, of course they do!), then the Toggle element makes organizing and displaying support information in a logical manner much simpler — especially for sophisticated products.
For example, we created this tutorial support page for Thrive Theme Builder to do just that. Here's an excerpt from Theme Builder's tutorial page:
Thrive Theme Builder Tutorial Page Excerpt
01
On this tutorial page, we organized the links to all our knowledge base articles for Thrive Theme Builder in a way that not only looks great, but walks new users through a step-by-step process. It outlines the order of operations they should follow to get up-to-speed with the product as fast as possible.
The design of the tutorial page allows readers to begin by scrolling through all of the available content quickly and then click on the subject that will help solve their current problem.
Upon clicking, the Toggle items open to reveal links to specific knowledge base articles likely to help them most with the current issue they’re facing.
Toggle Time: Now It's Your Turn
After reading through this post, we hope it’s clear to you just how versatile the Toggle element inside Thrive Architect and Thrive Theme Builder really is for your website.
Start using it right now on your sales pages to create super helpful FAQ sections...
...or on your blog posts to quiz readers about the content they’re reading about in your articles.
Honestly, the examples you’ve seen here are just the tip of the iceberg.
What are some other ways you can use the Toggle element to improve the quality, presentation and organization of your online content?
Share your ideas in the comments section below!
Hi Matt,
This is great! 😀
I’ve played around with the Toggle element before, but you’ve presented some *great* new uses! My favorite is placing the TOC element in a Toggle! Yay! (never would have thought of doing that, but it makes so much sense…especially in the use case you highlighted [EPIC post]!)
Is it possible to add images in the Toggle text? I’m thinking of the “instructions” use… I teach software, so having visuals (screenshots) for most steps is essential! (I’m guessing it is, since I notice you placed a button in the ‘Job Opening’ example.)
Having the new Toggle templates is also a great addition! 🙂
Thanks! <3
Thanks Karen! Yup, there’s so many use cases for the toggle element… especially because — yes you can add whatever elements you want inside the dropdown area. Images, video, icons, you name it. Have fun crafting the Toggle that suits the instructional needs of your site!
I can add images, videos and text in the dropdown area??? Wow, this REALLY made my day! You can’t imagine how helpful this info has been for the new website I’m about to build with your products! The whole blog post has been very helpful, but this last info stands out of all I’ve read in this post (hearts are popping out of my eyes right now – LOL!). This was one of the (too many) best posts I’ve read so far on your website, so please accept my e-hug, you and everyone else here that provide so much valuable help! The toggle element and its potentials seems to be the perfect tool for what I’m about to build with your products. THANK YOU! <3
Hi Dimitris, you sure can add images, videos and anything else you want in the dropdown area of the post… you can even use Post List elements within the Toggle element dropdown area! Check out the tutorial video I just added to the top of this post for some examples. Thanks so much for your comment!
This is interesting but I’d prefer to see a video in order to get the full view of the concept in action.
Thanks Gail… I’ll try to add a screen-share video soon to see if we can’t walk you through how to create these Toggle assets in real time.
I second that Matt. An in-depth video would be great. Article great content but nothing beats a great explanation video. Ta mate opened my eyes up to a great aspect Of Thrive Themes.
Thanks Tony… working on a Toggle element tutorial video as we speak!
Sounds great, thank you.
Hey Tony, your requested tutorial video is now available at the top of the post!
Brilliant. Thank you Matt. Great stuff.
Hi Gail, your requested tutorial video is now available at the top of the post!
You guys rock! Thanks
Plus, put toggles inside of toggles.
Totally right Mark! I imagine you can create some super advanced Toggle behavior if you start experimenting down that rabbit hole!
How to put toggles inside of toggles?
I don’t think that’s possible
Listing benefits. Our start up products and services have many benefits, but we don’t want to overload a potential customer with a long list, and many of the benefits won’t apply to every customer.
So, I’ve been thinking for sometime about using a toggle to list all the benefits, and then click on the arrow to drop down and see more detailed information.
So, this is a perfect article at a perfect time. Will be using the toggle element for benefits.
That’s a great idea Guy… sounds like you’ll be able to create a useful product benefits section that all your different types of customers can easily skim through to get the info they’re looking for. Thanks for sharing!
This is wonderful – so many different ways of using a toggle. I am quite inspired to give these a go!
Good luck Alice!
Thank you!
Great post Matt. We’ve never really used the toggle because we thought it wasn’t SEO friendly. NOW we know it is so… it’s “Toggle Time!” Thanks again. Keep Having FUN!
Awesome news Timmy! Glad we got that SEO question cleared up for you.
When I add Toggle, I don’t have the option to choose a Template, add columns, etc. What am I missing?
Love the features and can’t wait to add.
Is your product up to date, Michael? Seems like you still have the old version.
Hey, interesting article. Thanks. I am using toggles for quite some time now. Maybe in a way that wasn’t intended, idk. Fact is, that my visitors went down dramatically and I am afraid the new toggle layout isn’t as Google-friendly as you think.
Yes, the crawler can read the content within the toggle. BUT they don’t understand the structure of the page anymore!
I use a toggle instead of a H2. But Google does not understand this. It is super cool for the reader because you have an introduction some toggles for each thought/chapter and the conclusion. Looks nice and you can easily open the toggle that interests you, especially cool with long reviews. But you can’t define the label (the text shown in the collapsed toggle) as a H2. SEO tools are confused, too.
As much as I like this new toggle design and as much as I am afraid of all the work rolling it back, I guess I have to.
cR