Switch css properties on click

by Arnaud

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>
  
<div class="garantie-boxes">


<label class="garantie-box garantie-box-complementaire" onclick="changeClass()" id="" href="#tab-1">  

<div class="box garantie-box-illus"> <img src="images/illus/illus-complementaire.png" alt="garanties complementaire illus" /> </div>

<div class="box garantie-box-legende garantie-box-legende-complementaire"> 
<input type="radio" name="radio-garantie"  /> <p class="garantie-box-p-intro">Complémentaire Santé<span class="garantie-box-i"> i </span></p>
<p class="box garantie-box-vert">Compléte l'assurance maladie</p>
<div class="box garantie-box-confirm"> Sélectionné</div>
 </div>


</label><!-- GARANTIE BOX COMPLEMENTAIRE-->


<label class="garantie-box garantie-box-surcomplementaire garantie-unselec" onclick="changeClass()" id="" href="#tab-2">
<div class="box garantie-box-illus"> <img src="images/illus/illus-surcomplementaire.png" alt="garanties surcomplementaire illus" /> </div>
<div class="box garantie-box-legende garantie-box-legende-surcomplementaire"> 
<input type="radio" name="radio-garantie"  /> <p class="garantie-box-p-intro">Sur-complémentaire Santé<span class="garantie-box-i"> i </span></p>
<p class="box garantie-box-vert">Compléte la mutuelle principale</p>
<div class="box garantie-box-confirm"> Sélectionner</div>
 </div>
 
 


  </label><!-- GARANTIE BOX SURCOMPLEMENTAIRE-->
  
  
<label class="garantie-box garantie-box-hospitalisation garantie-unselec" onclick="changeClass()" id=""> 
<div class="box garantie-box-illus"> <img src="images/illus/illus-hospitalisation.png" alt="garanties hospitalisation illus" /> </div>

<div class="box garantie-box-legende garantie-box-legende-hospitalisation"> 
<input type="radio" name="radio-garantie"  /> <p...

CSS

#form-part-1 {
 background:#;
 display:;
}
.form-part-1-intro {
	margin : 20px 0 0;
	font-size: 14px;
}
.garantie-boxes {
	position: relative;
	width: 100%;
	min-height: 280px;
	margin: 10px 0 20px;
	clear: both;
}
.garantie-box {
	position: absolute;
	float: left;
	border: 1px solid #555;
	cursor: pointer;
}
.garantie-unselec {
 position:;
	top: 3px;
}
.garantie-box-complementaire {
	position: absolute;
}
.garantie-box-surcomplementaire {
	position: absolute;
	left: 336px;
}
.garantie-box-hospitalisation {
	position: absolute;
	left: 664px;
}
.garantie-selec {
	border: 5px solid #2cb770;
	background-repeat: no-repeat;
	background-position: 10px 5px;
}
.garantie-box-legende {
	position: relative;
}
.garantie-box input {
	position: absolute;
	left: 0;
	top: 20px;
	background: #ccc;
}
.garantie-box .garantie-box-p-intro {
	font-size: 16px;
	float: left;
 background:#;
	margin: 15px 0 0;
	text-align: center;
	width: 100%;
	font-weight: bold;
}
.garantie-box-vert {
	color: #2cb770;
	float: left;
	text-align: center;
	clear: both;
	width: 100%;
	position: relative;
	margin: 0 0 20px;
}
.garantie-box-confirm {
	background: #2cb770;
	width: 90px;
	text-align: center;
	color: #fff;
	clear: both;
	margin: 0 auto;
	padding: 5px;
	font-size: 14px;
	border-radius: 5px;
}
.garantie-box-i {
	background: #999;
	width: 90px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	clear: both;
	padding: 0 8px 0 5px;
	margin: 0 0 0 10px;
	border-radius: 100px;
}
/* garantie SELEC--*/

.garantie-selec .garantie-box-legende {
	background: #2cb770;
}
.garantie-selec .garantie-box input {
}
.garantie-selec .garantie-box-p-intro {
	color: #fff;
}
.garantie-selec .garantie-box-vert {
	color: #fff;
}
.garantie-box-confirm {
	background: #2cb770;
	color: #fff;
	border: 1px solid #fff;
}
.garantie-box-i {
	background: #999;
	width: 90px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	clear: both;
	padding: 0 8px 0 5px;
	margin: 0 0 0 10px;
	border-radius: 100px;
}

JavaScript

$('.garantie-box').click(function(){
$(this).siblings().css({'border':'1px solid #999'});
    $(this).css({'border':'5px solid #2cb770'});
    
    $('.garantie-box-legende').css({'background-color':'#fff','color':'#000'});
	$(this).find('.garantie-box-legende').css({'background-color':'#2cb770','color':'#fff'});
     
  $('.garantie-box-vert').css({'color':'#2cb770'});
	$(this).find('.garantie-box-vert').css({'color':'#fff'});
    
      $('.garantie-box-confirm').css({'background-color':'#2cb770','color':'#fff'});
	$(this).find('.garantie-box-confirm').css({'background-color':'#fff','color':'#c2b770'});
});