cómo configurar un icono expandible en el mismo lugar: javascript, html, css

cómo configurar íconos expandibles (i.e) consideremos tabla hay tantas filas ok Si ve una fila haciendo clic en el botón ver. [el botón de vista debe consistir en el signo (+) y en (-) este signo estará en el mismo lugar ok.] si presiona el botón de vista, el signo cambiará automáticamente a (-). Luego, si hace clic en otra fila. el signo existente (-) cambiará como (+). ahora la fila actual cambiará como (-). si borras esto significa .....

cómo configurar ambos iconos + e - iconos en el mismo lugar que todos

Respuestas

Supongamos que tienes el siguiente botón

<input type="button" class="expand" onclick="MyAction(this)" />

Tu clase css sera

.expand
{
background-image: (Path for Expand icon)
}

.collaps
{
background-image: (Path for collaps icon)
}

y tendras javascript como siguiente

<script type="text/javascript">
function MyAction(element)
{
if(element.className =="expand")
{
// logic for collaps behavior
element.className = "collaps";
}
else
{
// logic for expand behavior
element.className = "expand";
}
}
</script>

Necesitará algunos trucos más de CSS para corregir y alinear el ícono, pero espero que pueda hacerlo fácilmente :)