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
I HAD called upon my friend Sherlock Holmes upon the second morning after Christmas, with the intention of wishing him the compliments of the season. He was lounging upon the sofa in a purple dressing-gown, a pipe-rack within his reach upon the right, and a pile of crumpled morning papers, evidently newly studied, near at hand. Beside the couch was a wooden chair, and on the angle of the back hung a very seedy and disreputable hard-felt hat, much the worse for wear, and cracked in several places. A lens and a forceps lying upon the seat of the chair suggested that the hat had been suspended in this manner for the purpose of examination. “You are engaged,” said I; “perhaps I interrupt you.” “Not at all. I am glad to have a friend with whom I can discuss my results. The matter is a perfectly trivial one” –he jerked his thumb in the direction of the old hat– “but there are points in connection with it which are not entirely devoid of interest and even of instruction.”
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;
}