There is a menu with a submenu. When you click on the + list is revealed. How to make it so that after the disclosure instead of the plus has already been a minus. Here is the code:

.menu, #go { display: none; } .st { padding: 0 20px 0 20px; background: green; cursor: pointer; color: white; } #go:checked~.menu { display: block; } 
 <input id="go" type="checkbox" /> <label for="go" class="st">+</label> <ul class="menu"> <li><a href="#">подпункт 1</a></li> <li><a href="#">подпункт 2</a></li> <li><a href="#">подпункт 3</a></li> </ul>

    1 answer 1

    If on css , then you can pseudo-element.

     .menu, #go { display: none; } .st { padding: 0 20px 0 20px; background: green; cursor: pointer; color: white; } .st:before{ content:'+'; } :checked+.st:before{ content:'-'; } #go:checked~.menu { display: block; } 
     <input id="go" type="checkbox" /> <label for="go" class="st"></label> <ul class="menu"> <li><a href="#">подпункт 1</a></li> <li><a href="#">подпункт 2</a></li> <li><a href="#">подпункт 3</a></li> </ul>

    • Thank you so much - Juicy