cambiar estado con jquery

al hacer click cambia el estado dinamicamente

by femfoyou

HTML

<a href="javascript:permutardisplay('micontenedor')"> click acá para permutar de estado </a>
<br>
<a href="#" onclick="permutardisplay('micontenedor')"> click acá para permutar de estado </a>

<a href="javascript:cambiarColorTexto('#F00')"> cambiar color textos </a>
<a href="javascript:cambiarColorBorde('#F00')"> cambiar color borde </a>
<a href="javascript:cambiarColorEnlaces('#F00')"> cambiar color enlaces </a>
<a href="javascript:cambiarColoFondo('#F00')"> cambiar color fondo </a>
<br>
<a href="javascript:void(0);" onclick="cambiarTodos('#FF0')"> todos amarillos </a>

<div style="display: none;" id="micontenedor"> ... este es el contenido ... </div>

JavaScript

function permutardisplay(cual) {
  var micontenedor = document.getElementById(cual);
  if (micontenedor.style.display == "block") {
    micontenedor.style.display = "none";
  } else {
    micontenedor.style.display = "block";
  }
}

function cambiarColorTexto(elcolor) { $("#nombreDIV").css("color",elcolor); }
function cambiarColorEnlaces(elcolor) { $("#nombreDIV a").css("color",elcolor); }
function cambiarColorBorde(elcolor) { $("#nombreDIV").css("border-color",elcolor); }
function cambiarColoFondo(elcolor) { $("#democolor span").css("background-color",elcolor); }

// cambio todo eso al mismo tiempo
function cambiarTodos(elcolor) {
  // el DIV
  var contenedor = document.getElementById("nombreDIV");
  // busco los enlaces y cambio el color
  var lista = contenedor.getElementsByTagName("a");
  for(var i=0; i<lista.length; ++i) {lista[i].style.color = elcolor;}
  // busco los spans y cambio el color
  var lista = contenedor.getElementsByTagName("span");
  for(var i=0; i<lista.length; ++i) {lista[i].style.backgroundColor = elcolor;}
  // cambio el color del borde
  contenedor.style.borderColor = elcolor;
}