HTML
<div class="switch-wrapper"> <label class="switch"> <input id="map-switcher" type="checkbox" checked> <span class="slider round"></span> </label> <div class="switch-map"> Térkép </div> </div>
CSS
/*SWITCH*/ .switch-wrapper { width: 60px; display: block; margin: auto; margin-top: -20px; } .switch-map { width: 60px; margin-top: 20px; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; transform: rotate(90deg); } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #28122E; } input:focus + .slider { box-shadow: 0 0 1px #28122E; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .switch-wrapper { position: absolute; left: 0; right: 0; }
JS
jQuery('#map-switcher').change(function(){ if ($(this).is(':checked')) { jQuery(".hide-with-switch").show(); } else { jQuery(".hide-with-switch").hide(); } });
Leave a Reply