Quiero hacer un span que cuando hagas clic se despliegue una capa con un mensaje y que se haga un cambio de icono cuando se despliegue. Para ello tengo una "X" como content que he puesto en el ":before" de dicho span y queda muy bien, pero ¿Como puedo Cambiar valor de dicho "content" en el selector ":before" para que muestre una "V" una vez se despliegue la capa?
document.addEventListener('click', (e) =>
{
const varAux_cadComparar = e.target.id;
switch(true){
case (/^elemSpan/).test(varAux_cadComparar):{
fun_cambiarIconoDeElementoHtml('elemSpan');
break;
}
}
}
);
function fun_cambiarIconoDeElementoHtml(arg_objOid){
var varObj_html;
varObj_html = document.getElementById(arg_objOid);
alert(window.getComputedStyle(varObj_html, ':before').getPropertyValue('content'));
}
#bloque_msj{display:none}
#elemSpan:before{
content: 'X';
}
<span id="elemSpan">Pinche aqui para desplegar</span>
<div id="bloque_msj">Lore Ipsum</div>