Link "Read More", in einem HTML-Newsletter

Question

Ich möchte in meinem HTML-Newsletter einen Link "Lesen Sie mehr ..." einfügen, die meine Nachrichten innerhalb meiner E-Mail mit mehr Informationen (mehr Text) erweitern/verbergen. Wie kann ich dies tun, um mit Microsoft Outlook zu arbeiten?

Ich weiß, wie man das auf einer Webseite mit CSS (Code unten erwähnt) tut, aber auf einer E-Mail funktioniert das nicht.

HTML:

<p class="read-more-wrap"> 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. 
    <span class="read-more-target">hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum.</span> 
</p> 
<label for="post-1" class="read-more-trigger"></label> 

CSS:

.read-more-state { 
    display: none; 
} 

.read-more-target { 
    opacity: 0; 
    max-height: 0; 
    font-size: 0; 
    transition: .25s ease; 
} 

.read-more-state:checked ~ .read-more-wrap .read-more-target { 
    opacity: 1; 
    font-size: inherit; 
    max-height: 999em; 
} 

.read-more-state ~ .read-more-trigger:before { 
    content: 'Show more'; 
} 

.read-more-state:checked ~ .read-more-trigger:before { 
    content: 'Show less'; 
} 

.read-more-trigger { 
    cursor: pointer; 
    display: inline-block; 
    padding: 0 .5em; 
    color: #666; 
    font-size: .9em; 
    line-height: 2; 
    border: 1px solid #ddd; 
    border-radius: .25em; 
} 

Answer 1

Hier ist die einfachste Lösung, die ich denken konnte:

CSS:

#mycheckbox:checked ~ .moretext { 
    display: block; 
} 

.moretext{ 
    display: none; 
} 

#mycheckbox{ 
    display: none; 
} 
.showmore{ 
    cursor: pointer; 
} 

HTML:

<input type="checkbox" id="mycheckbox" /> 
<label for="mycheckbox" class="showmore">Toggle more</label> 
<div class="moretext" >Some more text</div> 

Demo: https://jsfiddle.net/behxbd0t/