10

Is it possible to insert collapsible text in an Outlook email ?

[+] header name When the reader clicks the [+] he will expand the text.

Tried these methods

  1. Making collapsible text without Java and attaching as text. Imports fine into an outlook email. But expansion doesn't work.

  2. Tried with Outlook VBA. Works fine with the .docm format outside of Outlook in Word. But doesn't work in Outlook.

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Ayan Mullick
  • 67
  • 2
  • 11
  • 38
  • 1
    Email is relatively passive. It's remotely possible that you could do this in HTML content using Javascript, but I'm almost positive that Outlook would prevent the script code from executing for security reasons and that most corporate malware scanners would also block the content. – Ken White May 10 '16 at 00:03
  • @KenWhite I understand. Outlook VBA is a better option. I have needed this for a long time. Please specify if anything unclear in the question. I've also shared the steps I've already tried. Also, this is really easy to implement in Lotus Notes. But we're using Outlook. – Ayan Mullick May 10 '16 at 00:19
  • VBA is not going to do what you want; AFAIK, it won't execute inside an email body. As I said, it's remotely possible in Javascript. – Ken White May 10 '16 at 00:26
  • 1
    I expected it to work like MS-Word where styling text as a heading enables you to "[Collapse or expand parts of a document](https://support.microsoft.com/en-us/office/collapse-or-expand-parts-of-a-document-701786e0-95e2-40bf-bfe5-f0233cd3520c)." Sadly, it does not seem to work. – ScottWelker Dec 09 '22 at 23:39

2 Answers2

4

H Mayan,

This can't be done in Outlook as it does not support the CSS required.

You can implement the practice of progressive enhancement whereby you code a CSS-only solution like this:

#toggle {
  display: none;
  font-size:14px;
}
#toggle:target {
  display: block;
}
#toggle:target + .close {
  display: block;
}
.close {
  display: none;
}
<a href="#toggle">REVEAL +</a>
<p id="toggle">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<a href="#" class="close">HIDE -</span>

And then use a media query, usually @media screen and (max-width:480px) to show/hide on supported devices and mso conditional css to give a simple fallback for Outlook.

Jamie Hall
  • 92
  • 8
  • Hello, what do you mean by fallback for outlook? Is there any specific css properties for outlook? – JGV Apr 06 '20 at 22:30
  • Vimalan: A fallback is a position you go to when an original objective cannot be reached, with the idea that it's better than nothing. Here, as Jamie indicates, Outlook can't handle this so the fallback stated is the method of making the behaviour still acceptable if the email happens to get opened in Outlook – Neil Jan 08 '21 at 12:07
0

just another ideea to through your way. What about a macro that creates a table with 2 columns, first column contains a trigger/toggle, second contains the expandable area. When you click on the toggle, the entire row toggles between height = autosize and height = 1 row.

Dumitru Daniel
  • 571
  • 4
  • 19