DT1
Expanding and Collapsing Text
Has anyone ever seen and/or had working the ability to expand and collapse elements of text? I have check around my usual haunts with no luck, I have created the following using hover.
I know its possible using js, but clearly I don't want to use that.
Cheers, Brendan
Brian Graves from DEG actually has two good examples on his Responsive Email Patterns website. Both are coded to only work on mobile right now, but you should be able to fiddle around with them to get them working on desktop screens, too.
Be warned though, something like this likely won't work in a lot of email clients, so test whatever you set up.
Thanks Jason, I will check that out! The code added before seems to work on desktop clients bar Gmail and Outlook. But I will absolutly check out Brian's patterns.
Brendan
In my opinion the best way of doing this is with checkboxes or radio buttons. :hover or :focus can easily be lost but a checkbox is a clear true or false value.
This example is for multiple tabs but you can use the same principle for a simple show/hide text.
I love this sort of stuff for when people insist on really long Terms and Conditions in the footer.
Checkboxes and radio are also more stable on mobile especially Android but the main drawback is that the :checked pseudo class is not supported on Outlook.com whereas :hover is.
Here's a quick example I just knocked up of the simple show/hide. Not tested too thoroughly but should work across iOS, Android, yahoo, Gmail, AOL, Apple mail and fallback to just show the content in Gmail App, Inbox, Outlook.com.
You may need to add some styles in an outlook conditional comment to get it working there, can't remember if it works or not and not got a live version to test on at the moment.
Thanks Mark, I will give that a go later today!