JSFiddle - React, Tailwind, and code Playground
by HappyCougar
HTML
<link rel="stylesheet" href="http://nephalemcube.ru/rle/templates/real/css/style.css">
<div id="st_list1" class="st_calc window" style="display:block;">
<p class="st_head">Калькулятор стоимости <br /> наших услуг</p>
<p class="st_sub_head_red">Консультация - бесплатно!</p>
<img class="st_close" src="http://rlexpert.ru/templates/real/images/close_icon.png" alt="" />
<div class="st_full_box check_group">
<div class="circle_check">
<img id="stch1" class="circle_checked" data-checked="true" src="http://rlexpert.ru/templates/real/images/circle_check_active.png" alt=""/>
<p>Без осмотра объекта оценки (по имеющимся документам)</p>
</div>
<div class="circle_check" data-disabled="st_dis1">
<img id="stch2" class="circle_checked" data-checked="false" src="http://rlexpert.ru/templates/real/images/circle_check.png" alt=""/>
<p>Осмотр объекта оценки</p>
</div>
</div>
<div id="st_dis1" class="disabled">
<img id="stch3" class="checked" src="http://rlexpert.ru/templates/real/images/squre_check.png" alt=""/>
<p>Выезд эксперта Внутри МКАД +</p>
<input type="text" name="st_mcad" id="st_mcad" value="" />
<p>км за МКАД</p>
</div>
<div id="st_sep_line"></div>
<div class="st_full_box check_group">
<div class="circle_check" data-disabled="st_dis2">
<img id="stch4" class="circle_checked" data-checked="true" src="http://rlexpert.ru/templates/real/images/circle_check_active.png" alt=""/>
<p class="st_big_p">Независимая оценка транспортных средств</p>
</div>
<div id="st_dis2" class="st_full_box check_group">
<div class="circle_check small">
<img id="stch5" class="circle_checked" data-checked="false" src="http://rlexpert.ru/templates/real/images/circle_check.png" alt=""/>
<p>для наследства (нотариуса)</p>
...
CSS
.st_full_box img,.st_full_box p {
display:inline-block;
vertical-align:top;
}
JavaScript
$(window).load(function(){
re_count();
});
$(".st_calc .circle_checked").click(function () {
if ($(this).parent().hasClass("disabled") == false && $(this).parent().parent().hasClass("disabled") == false) {
if($(this).data("checked") == false) {
$(this).parent().parent().find('.circle_checked').each(function() {
$(this).data("checked",false).attr("src","http://rlexpert.ru/templates/real/images/circle_check.png").get_disabled(this);
});
$(this).data("checked",true).get_disabled(this);
$(this).attr("src","http://rlexpert.ru/templates/real/images/circle_check_active.png");
}
re_count();
}
});
if (window.location.hash == '#st_calc') {
$('#st_list2').hide('fade', 1);
$('#shadow_box').show('fade', 500);
$('#st_list1').show('fade', 300);
scroll_to_elem('shadow_box',500);
}
$("#or_calculate_button,.st_calc_activate").click(function () {
$('#st_list2').hide('fade', 1);
$('#shadow_box').show('fade', 500);
$('#st_list1').show('fade', 300);
scroll_to_elem('shadow_box',500);
});
$(".st_calc").tooltip();
var slide_val = 1;
$("#st_slider").slider({
range: "max",
min: 1,
max: 3,
value: 1,
slide: function( event, ui ) {
slide_val = ui.value;
re_count();
if ($("#st_slider").parent().attr("id") !== "st_list1") {
$("#st_slider").parent().addClass("st_nail");
}
}
});
$(".st_next_list").click(function () {
$("#st_list1").hide("fade",500);
setTimeout(function() {$("#st_list2").show("fade",500);},500);
});
$(".st_calc .checked").click(function () {
if ($(this).parent().hasClass("disabled") == false) {
if($(this).data("checked") == true) {
$(this).data("checked",false);
$(this).attr("src","http://rlexpert.ru/templates/real/images/squre_check.png");
}
else {
$(this).data("checked",true);
...