swap icons by adding class to element only in pure CSS-CodePudding

I have a page than contain a read more button. When click on it, display some hidden content. Next to this button I have an icon represent by an arrow up or down in function if the button is set to show more or less. I take icons from library which allow to take them by the only way of class (not by link). I want to swap this icon according if read more or less. I can't use JavaScript. Is there any solution in order to add some class to an element only in pure CSS or any solution that can solve this issue?

.read_more_txt {
  display: none;
}

#read_more_checkbox {
  display: none;
}

#read_more_checkbox:checked~.read_more_txt {
  display: block;
}

.read_more_label {
  text-decoration: underline;
  font-weight: bold;
}

#read_more_checkbox~.read_more_label:before {
  content: attr(read_more);
}

#read_more_checkbox:checked~.read_more_label::before {
  content: attr(read_less);
}

<input type="checkbox" id="read_more_checkbox">
<label for="read_more_checkbox"  read_more="Show more" read_less="Show less">
    <span ></span>
    <span ></span>
    </label>
<div >Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam possimus ad necessitatibus quas veritatis. At accusantium enim praesentium nihil porro consequatur aperiam quia fuga adipisci in, incidunt velit fugiat laborum.</div>

CodePudding user response：

Use the :checked pseudo-selector to check if the checkbox is checked or not and then hide/show the span by means of the Adjacent sibling selector .

.ico-angle-up {
  display: none;
}

#read_more_checkbox:checked   label[for="read_more_checkbox"] > .ico-angle-up {
  display: inline;
}

#read_more_checkbox:checked   label[for="read_more_checkbox"] > .ico-angle-down {
  display: none;
}


/* original css*/
.read_more_txt {
  display: none;
}

#read_more_checkbox {
  display: none;
}

#read_more_checkbox:checked~.read_more_txt {
  display: block;
}

.read_more_label {
  text-decoration: underline;
  font-weight: bold;
}

#read_more_checkbox~.read_more_label:before {
  content: attr(read_more);
}

#read_more_checkbox:checked~.read_more_label::before {
  content: attr(read_less);
}

<input type="checkbox" id="read_more_checkbox">
<label for="read_more_checkbox"  read_more="Show more" read_less="Show less">
    <span >&darr;</span>
    <span >&uarr;</span>
    </label>
<div >Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam possimus ad necessitatibus quas veritatis. At accusantium enim praesentium nihil porro consequatur aperiam quia fuga adipisci in, incidunt velit fugiat laborum.</div>