JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<link type="text/css" href="https://unique-store.vl-it.ru//media/checkbox/st.css" rel="stylesheet" />


  <div class="mmmmmm">
    <div class="paydive">
      <div>
      <h2>Выберите способ доставки</h2>
        <ul class="ac-custom ac-radio crzsm sdecb">
          <li><input type="radio" name="delivery" id="radio1" value="111111">
            <label for="radio1">111111</label>
          </li>
          <li><input type="radio" name="delivery" id="radio2" value="222222">
            <label for="radio2">222222</label>
          </li>
          <li><input type="radio" name="delivery" id="radio3" value="333333">
            <label for="radio3">333333</label>
          </li>
        </ul>
      </div>
    </div>

    <div style="display:none" class="sdec">
      <div class="sdi">
        <label>Введите город <b>*</b></label>
        <input type="text" name="cartgorod" placeholder="Владивосток">
        <div class="sdadres" style="display:none">
          <label>Введите адрес доставки <b>*</b> пример (Ивановская 15, к123)</label>
          <input type="text" name="cartadres" id="cartadres" placeholder="Ивановская 15, к123">
        </div>
      </div>

      <h2>
        Выберите метод доставки, курьер СДЭК или самовывоз с точки СДЭК.
      </h2>

      <div class="sdc">
        <div class="sdb1">
          <h3>Курьер</h3>
          <span>
            <b>5-6</b> дн<br />
            <strong>1560</strong> руб
          </span>
        </div>

        <div class="sdb2">
          <h3>Самовывоз</h3>
          <span>
            <b>2-3</b> дн<br />
            <strong>1420</strong> руб
          </span>
        </div>
      </div>

      <br />
      <div class="sdkmap" style="display:none">
        когда выбираем самовывоз, тут подгружаеться карта сдэка с точками для выбора точки.
      </div>

    </div>
  </div>

CSS

.mmmmmm{
  margin:20px auto;
  width: 700px;
}
.paydive div,
.sdc div,
.sdi,
.sdkmap {
background: #F1F2F5;
padding: 20px;
border-radius: 3px;
}
.paydive{
  margin-bottom: 30px;
}
.sdc div,
.sdi {
border: 2px solid #F1F2F5;
background: #fff;
}
.sdc div:hover {
  border: 2px solid #6FC4C3;
}
.sdec h2{
margin: 25px 0 25px 0;
font-weight: 600;
}
.sdc div:first-child {
  margin-right: 25px;
}
.sdc div:last-child {
  margin-left: 25px;
}
.sdc div {
width: 50%;
cursor: pointer;
font-weight: 600;
}
div.sdbact {
  border: 2px solid #6FC4C3;
}
.sdec label {
font-weight: 600;
margin-bottom: 5px;
display: block;
}
.sdec label b {
  color: #FF2525;
  font-weight: 400;
}
.sdec input{
  font-size: 16px;
  background: #F1F2F5;
  border: 1px solid #D9DCE3;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 20px 0 20px;
  cursor: pointer;
  width: 100%;
-webkit-box-shadow: inset 0px 5px 12px 0px rgba(50, 50, 50, 0.06);
box-shadow: inset 0px 5px 12px 0px rgba(50, 50, 50, 0.06);
  border-radius: 3px;
}
.sdadres{
  margin-top:20px;
}
.sdec{
  margin-bottom: 30px;
  margin-top: 30px;
}
.sdec input {
  height: 50px;
  line-height: 50px;
}
.sdec input:hover,
.sdec input:focus{
  border: 1px solid #6FC4C3;
  background: #fff;
}
.sdc span{
  margin-left: auto;
  font-weight: 400;
  color: #7b7f88;
  border-left: 1px solid #F1F2F5;
  padding-left: 20px;
}
.sdc span b,
.sdc span strong {
  font-weight: 600;
  color: #282725;
  font-size: 16px;
}
.sdc span strong{
  font-size: 16px;
}

.sdc div{
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.sdc,
.sdb1,
.sdb2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.sdb1,
.sdb2 {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items:...

JavaScript

//при выборе 22222, показываем блок
$(document).ready(function() {
  $(".sdecb").change(function() {
    if ($('#radio2').prop("checked")) {
      $('.sdec').show(100);
    } else {
      $('.sdec').hide(100);
    }
  });
});

//при клике добавляем класс, чтобы сделать блок активным и убираем класс с неактивного
$(".sdc .sdb1").click(function() {
  $(this).addClass("sdbact");
  $(".sdb2").removeClass("sdbact");
  $(".sdkmap").hide(100); //прятать блок с картой
  $(".sdadres").show(100); //показываем строку ввода адреса, когда выбираем курьер
});
$(".sdc .sdb2").click(function() {
  $(this).addClass("sdbact");
  $(".sdb1").removeClass("sdbact");
  $(".sdkmap").show(100); //показывать блок с картой
  $(".sdadres").hide(100); //прячем строку ввода адреса, когда выбираем самовывоз
  $('#cartadres').val('').change(); //чистим строку ввода адреса, чтоб пусто было
});