Separate Show-Hide triggers with Hide trigger at end: CSS only - css

Question

I have two long introductory articles on the home page. They are only necessary for first time visitors so I want to simply show a summary with the option to expand it.
My issue is that as the articles are long, the 'HIDE' option needs to be at the END of the article. This makes the radio/input option limited unless I can figure out a way to activate it from the end. Is there a way to trigger it using only css?
The site is CSS only. I am not concerned with outdated browsers but I would like it to be SEO friendly (readable) and not have any security triggers (hence no scripts).
I've read through everything I could find, but the options either require the same trigger to activate show/hide (not user friendly in my case as user would have to search for it within the article) or JS. I've tried playing with links and buttons to no avail. I've considered using a dialog box, but that also requires JS to activate. Modal pop-up is a possibility, but I am not sure how that reacts with pop-up blockers so I have it as a last resort.
The other responses are somewhat dated, so I was hoping that there are some techniques that now have wider support that could be considered.
Here is the jsfiddle.
/*OPTION 1*/
#More,#Art1 {display: none} /*hides checkbox and 2nd part of article */
#More:checked~#Art1 {
display: block;
}
/*Trying to get it to close: */
#Less {
display: none}
#Less:checked~#Art2 {
display: none;
}
/* OPTION 2 */
.option2 {
background-color: yellow;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.text2b {
background: #bbb;
border-radius: 5px;
width: 70%;
position: relative;
transition: all 5s ease-in-out;
}
.text2b .close {
transition: all 200ms;
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #333;
}
<!--OPTION 1 -->
<p>OPTION 1. RADIO BUTTONS. The beginning of an article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.2B continued.
</p><input type=checkbox id="More"><label for="More">MORE</label>
<div id="Art1">
<p>
Second part of Lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. The End of Option 1.</p>
<input type=checkbox id="Less"><label for="Less">LESS</label>
</div>
<!--OPTION 2 -->
<div id="option2a" class="option2">
<p>OPTION 2. MODAL OPTION. The beginning of an article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.2B continued.
</p>MORE
<div id="option2b" class="overlay">
<div class='text2b'>
<p>
Second part of of MODAL OPTION. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. The end. </p>
<a class="close" href="#">CLOSE</a>
</div>
</div>
<p>
Other stuff... Meant only to check positioning of Modal.
</p>
The fiddle shows this option and a modal version I have been playing with. Other ideas that fit the prerequisites are welcome.

Answer 1

I had just about given up on this technique, but surprisingly, there is a solution.
Evidently you can tie multiple labels to one form control. So by simply adding a label (not input field) for "MORE" at the END of the article, it actually triggers the original input. No extra CSS required.
Works like a charm in FF and while I cannot see why there would be an issue in other browsers, I have not had an opportunity to verify.
Full credit for this brilliantly simple solution goes to Beverleyh at CSS-Tricks:
CSS-Tricks Forum
I hope this helps others. I was not really aware of this feature but could see many uses for it.