I am using Wordpress and trying to implement this code here: https://codepen.io/Idered/pen/AeBgF
HTML:
.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;
}
<div>
<input type="checkbox" class="read-more-state" id="post-2" />
<ul class="read-more-wrap">
<li>lorem</li>
<li>lorem 2</li>
<li class="read-more-target">lorem 3</li>
<li class="read-more-target">lorem 4</li>
</ul>
<label for="post-2" class="read-more-trigger"></label>
</div>
However, I am facing some problems - a grey line (that can be toggled) is appearing instead of the show more button - which is exactly what this user is also facing https://www.drupal.org/forum/support/post-installation/2016-10-14/read-more-toggle-pure-css-not-working-correctly
From the link directly above, you can see his and my problem here: http://www.monarchschool.org/test-toggle
Would appreciate any help on this - thanks in advance.
The problem is your label is not in the same level in your site. The operator
~
will target the siblings elements only, not their child or grandchild. Let me explain with the example. Look at the below code..test
class now check all the sibling elements with class.example
and apply the background color green. We have added one class.example
for the second level. Your CSS will not target those elements. In your original codelabel
comes under thep
and that's why it is not added the contentShow More
for your label. One solution is to remove thep
element and keep the label in the same level. Otherwise update your CSS like below to target the child elements.Here you go with your example as like as the live code.