In this tutorial, you will learn how to recreate the overlay toggle that Apple has on its iOS 17 landing page.
We will be creating this iOS 17-like info toggle with Elementor.
With a little (+) icon in the lower right corner, we are toggling on and off an extra set of information. All with a nice, sequential animation.
Check out the demo here, and be certain to click the little + toggle icons in the bottom right corners:
You can also visit the demo page directly.
A premium user requested this tutorial, and I liked the design and look, so here it is.
Features:
- Sleek: Great way to show more information, only for those seeking it
- Responsive: Works well on mobile devices too
- Customizable: use the icon of your choice, and style the text that shows up as you wish
Let's get started!
First, import the template on your page
This is a premium tutorial. Purchase access to unlock the full tutorial.
4 Responses
This looks incredible.
I'd like to leverage this in a project coming soon to the internets near you.
For lazy / ignorant users, would it be possible to make the whole block clickable? And still rotate the icon, display the popup, etc? I've dealt with users not clicking on icons even when they're obvious.
Hey Market!
Thank you glad it's to your liking!
I agree that little toggle isn't very remarkable, even less so actually on Apple's own page.
I had a discussion with this through email with an Element.how user, here was my thoughts:
Yes you are quite right [about the toggle being easy to miss], that's the first thing I noticed when someone sent me that design, asking for a tutorial...
I was like, nobody even sees these little toggles, or have any clue what they do, what's the point?
So in my demo I tried to make them stand out quite a bit more than what Apple has...
But probably this IS the point, Apple didn't want to distract people with too much information and text... but still wanted it there for those who REALLY wanted more information.
Something like this anyway. So 100% intentional on their part.
Back to your question: yes the whole thing could be clickable. For this, add this CSS:
.contentSwapToggle.contentSwapToggle.contentSwapToggle { position: static; } .contentSwapToggle.contentSwapToggle.contentSwapToggle.contentSwapToggle button::before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top:0; }It reverts back the toggle to be position:static though, so you will need to use flexbox, padding and margin to position it, and to remove the extra padding at the bottom of the containers. (You will understand what I mean easily after adding the CSS)
Cheers!
Hi Maxime, thanks for this tutorial! One question.. i can't seem to keep the front and overlay containers the same height. Sometimes the overlay container will be a higher height than the front container when I toggle it. Is there a way to make both heights the same throughout all screen sizes?
Hey Shay!
Could you share your page with me where you are testing this?
In theory, the overlay is always the same height as the other container. However in some scenarios this might not hold true, if for instance there is so much content in the overlay that it has to be taller to accommodate it all.
Maybe there are other scenarios too? That's why I'd need to see your page.
Cheers!