There is a text which in the mobile version unfolds by pressing the icon + and is minimized by pressing - . I added 3 points, but after clicking on + text unfolds and I need these 3 points to disappear, but they remain. How to solve it? I added a point class and did it in CSS, but it doesn't work. What is the problem? Here is the HTML:

  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <span class="point">...</span> <input id="read-more-state-1" class="read-more-state" type="checkbox"> <span class="read-more-target"> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </span> <label for="read-more-state-1" class="read-more-button"> <span class="read-more-button-icon"></span> </label> </p>

Here is the CSS:

 .read-more-state { display: none; } .read-more-button { display: none; } @media only screen and (max-width: 600px) { .read-more-target { opacity: 0; font-size: 0; transition: .25s ease; } .point { display: none; } .read-more-button { display: block; margin: 1em auto 0; border-radius: 0.25em; width: 1em; height: 1em; background: url(img/arrow%20grad.svg); background-size: cover; cursor: pointer; } .read-more-state:checked + .read-more-target { opacity: 1; font-size: inherit; } .read-more-state:checked ~ .read-more-button { background: url(img/arrow%20up%20grad.svg); background-size: cover; cursor: pointer; } }

    1 answer 1

    1. The point element must be hidden by default;
    2. On mobile phones do it inline ;
    3. .read-more-state:checked ~ .point points if the checkbox is active;
    4. We rule a little marking, so that the point after the checkbox.

     .read-more-state { display: none; } .read-more-button { display: none; outline: 1px solid red; } .point { display: none; } @media only screen and (max-width: 600px) { .read-more-target { opacity: 0; font-size: 0; transition: .25s ease; } .point { display: inline; } .read-more-button { display: block; margin: 1em auto 0; border-radius: 0.25em; width: 1em; height: 1em; background: url(img/arrow%20grad.svg); background-size: cover; cursor: pointer; } .read-more-state:checked ~ .read-more-target { opacity: 1; font-size: inherit; } .read-more-state:checked ~ .point { display: none; } .read-more-state:checked ~ .read-more-button { background: url(img/arrow%20up%20grad.svg); background-size: cover; cursor: pointer; } } 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <input id="read-more-state-1" class="read-more-state" type="checkbox"> <span class="point">...</span> <span class="read-more-target"> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </span> <label for="read-more-state-1" class="read-more-button"> <span class="read-more-button-icon"></span> </label> </p>