Elementor has three options for showing/hiding content:
- Toggle
- Tabs
- Accordion
All of these act fairly similarly, with their main differences being in styling. Play around with the elements below to see all of their options!
Text Toggle
Tabs - Horizontal
Tabs appear horizontally by default, but you can style them vertically as well!
Notice how you can change the headers to reflect active & non-active state of the tab!
You can add as many tabs as you’d like, but eventually they become very squished so be careful!
Tabs - Vertical
You can change the alignment of the tabs too! This is only apparent on Horizontal Tabs, or on Vertical tabs with a lot of content.
You can also add border styles, background colors, and much more to make these tabs as beautiful as possible!
Accordion
Accordions act very VERY similarly to Text Toggle, but they come with a little bit more pre-built styling. Also, text toggles allow you to have all items open at once, while accordions automatically close once you hit the next item.
You can change the icons to anything you’d like, for active and non-active states!
Another accordion version
This accordion has the icon on the other side, and the border is removed.
Notice how the icon changes direction when active.
Also notice how the accordion items close when another one is opened.