将样式列表图像onclick +更改为-

Question

Hello everybody I hope you are all fine please help me to resolve this problem,I am confused with this, when "onclick" I want that the + become - like this attached image. remember that that + and - are images named image 'puceplus.png' and 'pucemoins.png'

#ulist li:before {
    content: url('puceplus.png');
    margin-right: 4px;
}

<ul id="ulist">
            <li  onclick="hideshow('usublist1')">
                Gestion des données clients
                <ul id="usublist1" style="display:none;" class="sublist">
                    <li >
                       Centraliser vos données clients et éviter les redondances
                      </li>

                </ul>
            </li>
</ul>

Answer 1

I would use two different classes for opened and closed status. Then with javascript you changed that on click.

There is a working example without jQuery. You just have to include your images in the right places (content:url(...)).

jsfiddle: change style list image without jQuery

#ulist > li {
  list-style: none;
}
#ulist > li:hover {
 cursor: pointer;
} 
#ulist > li:before {
  margin-right: 4px;
}
#ulist > li.closed:before {
  content: "+";
}
#ulist > li.opened:before {
  content: "-";
}