Criar "toggle button" para trocar cor da div

[Yasser Anuar Lima 0]

Olá, tenho um layout cujas divs estão personalizadas com um código CSS como segue o exemplo abaixo:

div.menu_l_apagado{
	border:solid 2px #000000;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright:5px;
	-moz-border-radius-bottomleft:0px;
	-moz-border-radius-bottomright:0px;
	-webkit-border-top-left-radius:0px;
	-webkit-border-top-right-radius:5px;
	-webkit-border-bottom-left-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	border-top-left-radius:0px;
	border-top-right-radius:5px;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
	
	background-color: rgba(100, 0, 0, 0.5);
	background: rgba(100, 0, 0, 0.5);
	color: rgba(100, 0, 0, 0.5);


	float: left;
	width: 70px;
	height:890px;
}

div.menu_l_aceso{
	border:solid 2px #000000;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright:5px;
	-moz-border-radius-bottomleft:0px;
	-moz-border-radius-bottomright:0px;
	-webkit-border-top-left-radius:0px;
	-webkit-border-top-right-radius:5px;
	-webkit-border-bottom-left-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	border-top-left-radius:0px;
	border-top-right-radius:5px;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
	
	background-color: rgba(150, 0, 0, 1);
	background: rgba(150, 0, 0, 1);
	color: rgba(150, 0, 0, 1);


	float: left;
	width: 70px;
	height:890px;
}

Como pode-se perceber no código, as divs estão com uma borda customizada e com uma cor RGBA também customizada. O que eu quero fazer é alterar a cor destas divs com uma espécie de toggle button, ou seja, clicar uma vez mudará para a cor secundária, clicar outra vez mostrará a cor primária, dando um efeito de luz acesa ou apagada.

 

Pesquisando pelo fórum encontrei um código Javascript que me permite alterar a cor da div somente, porém, não é possível mudar novamente para a cor primária. No código css acima, há duas classes para a mesma div, ou seja, uma classe para a cor primária, e outra, para a secundária.O código javascript que altera para a segunda classe é o seguinte:

 

function abas (){
		document.getElementById("menu_l").className = "menu_l_aceso";
}

Este código é ativado por um link:

 

<a href="javascript:abas();">MUDAR COR </a>

Eu gostaria também de substituir uma imagem por outra quando esse toggle button for pressionado, porém não faço ideia de como fazer isso, pois não tenho muitos conhecimentos em CSS/Javascript.

 

É possível fazer tudo isto?

 

 

Desde já agradeço a atenção.

[Dian Carlos 29]

Você pode usar o método toggleClass do jQuery.

 

http://api.jquery.com/toggleClass/

 

Seu CSS já está do jeito certo, agora é só por a função pra rodar..

[Yasser Anuar Lima 0]

Acho que é exatamente isto que eu estou procurando cara, muito obrigado mesmo.

[Marcos Xavier 189]

O Dian Carlos disse tudo. um exemplo:

 

<style>
div {
width: 200px;
height: 200px;
background-color: #ccc;
}
.big-blue {
width: 200px;
height: 200px;
background-color: #00f;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>

<input type="submit"  id="sub">
<div id="muda"></div>
<script>
$( "#sub" ).click(function() {
$("#muda").toggleClass( "big-blue", 1000 );
});
</script>

[Yasser Anuar Lima 0]

Obrigado por todos os esclarecimentos, as soluções funcionaram perfeitamente.