Есть текст который в мобильной версии разворачивается по нажатию иконки +
и сворачивается по нажатию -
. Я добавил 3 точки, но после нажатия на +
текст разворачивается и мне нужно чтобы эти 3 точки исчезли, но они остаются. Как это решить? Я добавил класс point
и в CSS сделал, но не работает. В чем проблема?
Вот 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>
Вот 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;
}
}