|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> jQuery(document).ready(function(){ // Au clic dans la colonne inactive, on lui donne le focus et on coche automatiquement le bouton radio situé en en-tête jQuery(".livraison-column").on("click", function(event) { event.stopPropagation(); var self = jQuery(this); if(self.hasClass("column-inactive")) { var currentColumnActive = jQuery(".column-active"); currentColumnActive.removeClass("column-active").addClass("column-inactive"); currentColumnActive.find("[name='shipping-location']").removeAttr("checked"); self.removeClass("column-inactive").addClass("column-active"); self.find("[name='shipping-location']").attr("checked", "checked"); } }); }); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<form class="" action="#"> <div class="alpha grid_8 livraison-column column-active"> <div class="header"> <label><input checked="checked" type="radio" name="shipping-location" id="to-shop" value="to-shop" /><span class="left">En magasin partenaire Drivista-shop</span><span class="right"> Offert</span></label> </div> </div> <div class="grid_8 omega livraison-column column-inactive"> <div class="header"> <label><input type="radio" name="shipping-location" id="to-home" value="to-home" />A domicile<span class="right"> 10,00 € TTC</span></label> </div> </div> </form> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.livraison-column{ opacity: 0.4; background-color: #efefef; } .livraison-column.column-active, .livraison-column .header{ opacity: 1; } .livraison-column .header{ padding: 40px 20px; float: left; background-color: #efefef; } .livraison-column .header label{ padding: 0; margin: 0; width: 420px; text-align: left; font-weight: bold; font-size: 1.143em; /* 16px (on part de 14px pour les formulaires) */; } .livraison-column .header label input[type="radio"]{ margin-right: 10px; } .livraison-column .header .right{ float: right; margin-left: 10px; } .livraison-column.column-active .header{ background-color: var(dominant-color); } .livraison-column.column-active .header label{ color: #fff; } .livraison-column.column-inactive:hover{ cursor: pointer; } |