How to toggle my "read more" with CSS only
Look for solutions only in CSS. I have a story section on my website, but I want to show a small portion of each story, and the reader can click "More ..." if they want to read the rest of the story. This works for me, but I want "Read more ..." to go away when it is clicked as the text "read less" is displayed at the bottom so the reader can minimize it after reading it. Here is a link to my code: My code @js fiddle
<span id="myReadMore">
<h4>First part of the static content</h4>
<p>
<label for="inputShownContent3">
<span>Read more....</span>
</label>
</p>
</span>
<br />
<input type=radio id="inputShownContent3" name="group3" />
<span id="spanHiddenContent3">
<p>toggle the second part of the story.</p>
<label for="inputHiddenContent3">
<span>Read less....</span>
</label>
</span>
<input type=radio id="inputHiddenContent3" name="group3" />
And my Css,
input#inputHiddenContent3,#inputShownContent3
{
display: none;
}
span#spanHiddenContent3
{
display: none;
}
input#inputShownContent3:checked ~ span#spanHiddenContent3
{
display: block;
}
input#inputHiddenContent3:checked ~ span#spanHiddenContent3
{
display: none;
}
input#inputShownContent3:checked ~
span#myReadMore
{
display: none;
}
source to share
input#inputHiddenContent3,#inputShownContent3 {
display: none;
}
span#spanHiddenContent3 {
display: none;
}
input#inputShownContent3:checked ~ span#spanHiddenContent3 {
display: block;
}
input#inputHiddenContent3:checked ~ span#spanHiddenContent3 {
display: none;
}
input#inputShownContent3:checked ~ #myReadMore p {
display: none;
}
<input type=radio id="inputShownContent3" name="group3" />
<span id="myReadMore">
<h4>First part of the static content</h4>
<p>
<label for="inputShownContent3"><span>Read more....</span></label>
</p>
</span>
<br />
<span id="spanHiddenContent3">
<p> toggle the second part of the story. </p>
<label for="inputHiddenContent3">
<span>Read less....</span>
</label>
</span>
<input type=radio id="inputHiddenContent3" name="group3" />
I have moved the hidden checkbox up a bit in the HTML (as the comment said, you cannot query back). Also, I added a selector similar to your original, which selects the paragraph containing "Read More" and hides it when the checkbox is active.
Using a checkbox and a checked property was actually a pretty nifty way to do it ... thanks for teaching me something!
EDIT: Didn't notice some of your own CSS rules trying to do the same. So some of this is probably overkill and could be addressed. Unfortunately, I am lazy.
source to share