Pure CSS Read More/Less button not working

Question

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.

Answer 1

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 ~ .example {
   background:green;
}

<p class="test">Test</p>
<p class="nothing">Nothing</p>
<p class="example">Example</p>
<p><span class="example">Second Level Example</span></p>

.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 code label comes under the p and that's why it is not added the content Show More for your label. One solution is to remove the p element and keep the label in the same level. Otherwise update your CSS like below to target the child elements.

.read-more-state ~ p > label.read-more-trigger:before {
content: 'Show more';
}

.read-more-state:checked ~ p > label.read-more-trigger:before {
content: 'Show less';
}

Here you go with your example as like as the live code.

.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 ~ p > label.read-more-trigger:before {
    content: 'Show more';
    }

    .read-more-state:checked ~ p > label.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>
  
    <p><label for="post-2" class="read-more-trigger"></label></p>
    </div>

Answer 2

I think you Just want this :)

.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: 0px 10px;
    color: #fff;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #dea119;
    border-radius: 20px;
    background-color: #b9890c;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0,0,0,0.08);
}

/* Other style */ 
body {
  padding: 2%;
}

p {
  padding: 2%;
  background: #0a0a0a;
  color: #ffffff;
  border: 1px solid #000000;
  border-radius: .25em;
}
p:hover {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0,0,0,0.08);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" class="read-more-state" id="post-1" />

  <p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p>
  
  <label for="post-1" class="read-more-trigger"></label>
</div>

<div>
  <input type="checkbox" class="read-more-state" id="post-2" />

  <ul class="read-more-wrap">
    <li>Bootstrap</li>
    <li>Javascript</li>
    <li class="read-more-target">HTML 5</li>
    <li class="read-more-target">Css 3</li>
  </ul>
  
  <label for="post-2" class="read-more-trigger"></label>
</div>