Contact

#tirsanLocations-tab { display: flex; justify-content: center; flex-wrap: wrap; } #tirsanLocations-tab label { border: 1px solid #2F3292; background: #fff; color: #2F3292; padding: 9px 24px; border-radius: 5px; cursor: pointer; transition: .4s; margin: 5px; font-weight: 500; } body:not([class*="tirsanLocation"]) label[for="tirsanLocation1"], body.tirsanLocation1 label[for="tirsanLocation1"], body.tirsanLocation2 label[for="tirsanLocation2"], body.tirsanLocation3 label[for="tirsanLocation3"], body.tirsanLocation4 label[for="tirsanLocation4"], body.tirsanLocation5 label[for="tirsanLocation5"], #tirsanLocations-tab label:hover { background: #2F3292 !important; color: white !important; } [data-tirsanLocations] { display: none; } body:not([class*="tirsanLocation"]) [data-tirsanLocations="1"], body.tirsanLocation1 [data-tirsanLocations="1"], body.tirsanLocation2 [data-tirsanLocations="2"], body.tirsanLocation3 [data-tirsanLocations="3"], body.tirsanLocation4 [data-tirsanLocations="4"], body.tirsanLocation5 [data-tirsanLocations="5"]{ display: block; } document.addEventListener('input', function(e){ if(e.target.closest('[name="tirsanLocations"]')) { var a = document.querySelector('body'), b = document.querySelector('[name="tirsanLocations"]:checked'); a && b && a.setAttribute('class', b.getAttribute('id')); } });