"Read More" link, in an HTML Newsletter - html

Question

I want to insert in my HTML newsletter a link "Read more ... " that expand/hide my news inside of my email with more info (more text). How can I do this to work on Microsoft Outlook.
I know how to do that on a web page using CSS (code mentioned below) but on an email this doesn't work.
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

Here is the easiest solution I could think of:
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/