Read more sample CSS
I HAD called upon my friend, Mr. Sherlock Holmes, one day in the autumn of last year and found him in deep conversation with a very stout, florid-faced, elderly gentleman with fiery red hair. With an apology for my intrusion, I was about to withdraw when Holmes pulled me abruptly into the room and closed the door behind me.
style-sheet
<div id="read-more-0">I HAD called upon my f ------ <input id="toggle0" class="input-go" type="checkbox" /> <span class="more-open" style="margin: 0px;"> <label for="toggle0">[more]</label> </span> <span class="more-contents" style="margin: 0px;"><span class="more-close" style="margin: 0px;"><label for="toggle0">[close]</label></span> </span></div> <div> /*Do not break lines in WordPress */
#read-more-0 label{ cursor: pointer; } #read-more-0 input{ display: none; } #read-more-0 input ~ span.more-open {/* This process may not be necessary */ display: inline; } #read-more-0 input ~ span.more-contents { display: none; } #read-more-0 input ~ span.more-close { display: none; } #read-more-0 input:checked ~ span.more-open{ display: none; } #read-more-0 input:checked ~ span.more-contents{ display: inline; } #read-more-0 input:checked ~ span.more-close{ /* This process may not be necessary */ display: inline; }
Click to view main content

style-sheet
<div id="read-more-2"> <input id="toggle2" class="input-go" type="checkbox" /> <div class="more-open" style="margin: 0px;"><label for="toggle2">THE BLUE CARBUNCLEE</label></div> <div class="more-contents" style="margin: 0px; width:60%"> <img src="01.jpg" style=" width:240px; float:left;margin-right:5px;"/>I HAD ----------- </div> </div> /*Do not break lines in WordPress */
#read-more-2 label{ cursor: pointer; } #read-more-2 input{ display: none; } #read-more-2 input ~ div.more-contents { display: none; } #read-more-2 input:checked ~ div.more-contents{ display: block; }