So I am trying to make an interactive layout where when i click (say a menu) the menu and it disappears and a close icon appears preferably something related to z-index or opacity. I label menu and close icon for an input checkmark with an id of lets say “active”

so basically <label for=”active”><svg class=”close” ></label> <label for=”active”</svg> and <svg class=’menu’></svg></label>
I put both these svgs in a parent container and use postion relative on the parent
and absolute on the individual svg classes so i can make them be on the same position

Now I go to style sheet and make the opacity of the .close 0 by default so it hides,
and then i link it with .:checked pseudo selector through
#active:checked ~ .close{
opacity: 1
}
I do this so the .close suddenly reappears, but there seems to be an issue as it does not work and I have yet to discover the way to make the menu button disappear as the close button reappears.

I was expecting It to reappear as i had set the opacity to 1 but it seems that the :checked selector does not work at all.