Ссылка «Подробнее» в информационном бюллетене HTML

Question

Я хочу добавить в свой информационный бюллетень HTML ссылку «Подробнее ...», которая расширяет/скрывает мои новости внутри моего письма с дополнительной информацией (больше текста). Как это сделать, чтобы работать в Microsoft Outlook.

Я знаю, как это сделать на веб-странице с помощью CSS (код, упомянутый ниже), но по электронной почте это не работает.

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

Вот самое простое решение, я мог думать:

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> 

Демо: https://jsfiddle.net/behxbd0t/