Hello everyone, there is such code:
var label = document.querySelectorAll('.item-inner label[data-target]'), labelInner = document.querySelectorAll('.form-two label[data-target]'), itemDiv = document.querySelectorAll('.box-style'), itemDivInner = document.querySelectorAll('.box'), buttonPay = document.getElementById('payment_button'), form = document.querySelector('.invoice'), buttonForm = document.querySelector('.link-form'); function checkLabel(element, className) { className.forEach(function(item) { item.classList.remove('active'); }); var targetDiv = document.querySelector(element.getAttribute('data-target')); targetDiv.classList.add('active'); } label.forEach(function(checked) { checked.addEventListener('click', function(e) { checkLabel(this, itemDiv); form.classList.add('show'); if (checked.getAttribute('for') === 'sub2') { buttonPay.style.display = 'none'; } else { buttonPay.style.display = 'inline-block'; } }); }); labelInner.forEach(function(checked) { checked.addEventListener('click', function(e) { checkLabel(this, itemDivInner); }); }); buttonForm.addEventListener('click', function(e) { e.preventDefault(); labelInner.forEach(function(checked) { if (checked.getAttribute('for') == 'sub6') { checked.previousElementSibling.setAttribute('checked', 'checked'); checkLabel(checked, itemDivInner); } }); }); @charset "UTF-8"; /* --------------------------------------------- Assets --------------------------------------------- */ /* --------------------------------------------- Colors --------------------------------------------- */ /* --------------------------------------------- Fonts --------------------------------------------- */ /* --------------------------------------------- Stylings --------------------------------------------- */ html, body { height: 100%; } body { padding: 0; margin: 0; width: 100%; /*display: -webkit-box;*/ /*display: -moz-box;*/ /*display: box;*/ /*display: -webkit-flex;*/ /*display: -moz-flex;*/ /*display: -ms-flexbox;*/ /*display: flex;*/ /*-webkit-box-pack: center;*/ /*-moz-box-pack: center;*/ /*box-pack: center;*/ /*-webkit-justify-content: center;*/ /*-moz-justify-content: center;*/ /*-ms-justify-content: center;*/ /*-o-justify-content: center;*/ /*justify-content: center;*/ /*-ms-flex-pack: center;*/ /*-webkit-box-align: start;*/ /*-moz-box-align: start;*/ /*box-align: start;*/ /*-webkit-align-items: flex-start;*/ /*-moz-align-items: flex-start;*/ /*-ms-align-items: flex-start;*/ /*-o-align-items: flex-start;*/ /*align-items: flex-start;*/ /*-ms-flex-align: start;*/ background-color: #CCCC33; font-family: "Roboto Condensed", sans-serif; } a { color: #3f51b5; } a:hover { text-decoration: none; } .body-wrap { height: 100%; width: 100%; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } /*@media (min-height: 580px) {*/ /*!*body {*!*/ /*!*-webkit-box-align: center;*!*/ /*!*-moz-box-align: center;*!*/ /*!*box-align: center;*!*/ /*!*-webkit-align-items: center;*!*/ /*!*-moz-align-items: center;*!*/ /*!*-ms-align-items: center;*!*/ /*!*-o-align-items: center;*!*/ /*!*align-items: center;*!*/ /*!*-ms-flex-align: center;*!*/ /*!*}*!*/ /*}*/ .container { width: 100%; max-width: 580px; padding-right: 20px; padding-left: 20px; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } .invoice { background-color: #ffffff; border-radius: 10px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.13); margin: 50px 0; padding: 50px 30px 30px; } .invoice header { margin-bottom: 30px; } .invoice header section { position: relative; width: 100%; padding-top: 120px; } .invoice header section:nth-of-type(1) h1 { /* float: left; */ text-align: center; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; color: #344760; font-size: 25px; margin-top: 20px; margin-bottom: 5px; } .invoice header section:nth-of-type(1) span { float: right; color: #b7bcc3; font-size: 14px; margin-top: 10px; letter-spacing: 2px; } .invoice header section:nth-of-type(1) .logo img { position: absolute; right: 0; left: 0; top: -35px; margin: 0 auto; content: ""; height: 140px; } .invoice header section:nth-of-type(2) { float: right; } .invoice header section:nth-of-type(2) span { font-size: 21px; color: #b7bcc3; letter-spacing: 1px; } .invoice header section:nth-of-type(2) span:before { content: "#"; } .invoice main { border-left-width: 0px; border-right-width: 0px; padding-top: 0; padding-bottom: 0; } .invoice footer { text-align: right; margin-top: 30px; } .invoice footer button { display: inline-block; padding-right: 0; padding-left: 0; background: none; border: none; font-size: 19px; font-family: inherit; font-weight: bold; text-decoration: none; text-transform: uppercase; position: relative; letter-spacing: 1px; cursor: pointer; outline: none; color: #CCCC33; } .invoice footer button:focus { border: none; outline: none; } .invoice footer button:-moz-focus-inner { border: none; outline: none; } .invoice footer button:after { content: ""; width: 0%; height: 4px; position: absolute; right: 0; bottom: -10px; background-color: inherit; -webkit-transition: width 0.2s ease-in-out; -moz-transition: width 0.2s ease-in-out; transition: width 0.2s ease-in-out; } .invoice footer button:hover:after { width: 100%; } .invoice footer button:after { background-color: #CCCC33; } .invoice footer button:disabled { color: #b7bcc3; cursor: not-allowed; } .invoice footer button:disabled:hover:after { display: none; } .invoice footer button:disabled:after { background-color: #b7bcc3; } .iframe { display: block; margin: 0 auto; } .inner h2 { text-transform: uppercase; font-weight: 600; letter-spacing: 2px; color: #344760; font-size: 20px; text-align: center; margin: 0 0 30px 0; } .inner input[type=text] { border: none; padding-top: 5px; padding-bottom: 5px; font-size: 16px; line-height: 24px; outline: none; color: #344760; width: 100%; box-shadow: 0 1px 0 0 #b7bcc3; transition: border-color .3s, box-shadow .3s; } .inner input[type=text]:focus { border: none; outline: none; box-shadow: 0 1px 0 0 #CCCC33; } .inner input[type=text]::-moz-focus-inner { border: none; outline: none; border-color: #CCCC33; } .inner textarea { width: 100%; text-align: left; resize: none; margin-top: 20px; font-size: 16px; border: none; outline: none; color: #344760; box-shadow: 0 1px 0 0 #b7bcc3; transition: border-color .3s, box-shadow .3s; padding: 10px 10px 20px 5px; min-height: 130px; } .inner textarea:focus { border: none; outline: none; box-shadow: 0 1px 0 0 #CCCC33; } .item { box-sizing: border-box; width: 50%; vertical-align: top; padding-right: 10px; display: inline-block; margin-right: -4px; text-align: center; } .form-item { margin-bottom: 20px; } .form-item .rub { vertical-align: bottom; } .form-item label { display: inline-block; margin-bottom: 10px; font-weight: 600; color: #344760; } .rub { font-size: 17px; color: #344760; display: inline-block; vertical-align: middle; } .input-sum { display: inline-block; vertical-align: middle; height: 56px; width: 110px; } .item label { display: inline-block; cursor: pointer; position: relative; padding-left: 25px; text-align: left; } .item label:before { content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-right: 10px; border: 1px solid #CCCC33; position: absolute; left: 0; top: 0; bottom: 1px; } .item input[type=radio] { display: none; } .item input[type=radio]:checked + label:after { position: absolute; background-color: #CCCC33; height: 10px; width: 10px; content: ""; display: inline-block; left: 4px; top: 4px; border-radius: 50%; } .item input[type=radio]:checked + label > span { border-bottom: 1px solid green; } .italic { font-style: italic; } .box-style { margin-top: 30px; display: none; } .box { margin-top: 30px; display: none; } .box-style p { line-height: 21px; } .box-style .col-item { width: 50%; display: inline-block; padding: 0 5px; margin-right: -4px; box-sizing: border-box; } .active { display: block; } .invoice.show footer button { margin-top: -51px; } <div class="body-wrap"> <div class="container"> <form class="invoice"> <header> <section> <h1 class="invoice-title">Тип</h1> </section> </header> <main> <section class="inner"> <div class="item-inner"> <div class="item"> <input id="sub1" name="form" type="radio" value=""> <label for="sub1" data-target=".form-one"><span>Оплата</span> </label> </div> <div class="item"> <input id="sub2" name="form" type="radio"> <label for="sub2" data-target=".form-two"><span>Оплата Другая</span> </label> </div> </div> <div class="box-style form-one"> <div class="form-item"> <label for="sub3">ФИО</label> <input type="text" id="sub3" placeholder="Иванов Иван Иванович"> </div> <div class="form-item"> <span class="input-sum"> <label for="sub4">Сумма</label> <input type="text" id="sub4"> </span> <span class="rub">₽</span> </div> </div> <div class="box-style form-two"> <h2>выберите способ</h2> <div class="item"> <input id="sub5" name="form1" type="radio" value=""> <label for="sub5" data-target=".form-three"><span>Карта</span> </label> </div> <div class="item"> <input id="sub6" name="form1" type="radio"> <label for="sub6" data-target=".form-four"><span>Онлайн</span> </label> </div> <div class="box form-three"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet unde aperiam, rerum ab ipsa, dolore vitae dolor assumenda incidunt perferendis in recusandae officia necessitatibus nam soluta quas reiciendis ea.</p> <p class="italic">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis error natus, voluptatem consequatur, rem, neque consectetur eligendi id, ipsa aut eius illo quasi voluptates placeat reprehenderit praesentium. Iure, eum, repudiandae. <a href="#" class="link-form">форму</a>.</p> </div> <div class="box form-four"> Здесь есть форма </div> </div> </section> </main> <footer> <button type="submit" id="payment_button" disabled="">Оплатить</button> </footer> </form> </div> </div> I can not implement the following. Open the radiobutton 'Payment is different' and further open the button 'Map' there you can see the link 'form' , clicking on it should open and the nearby radiobutton 'Online' becomes active. I tried to implement it here, but it didn't quite work out. what you need, that is, when you first click everything works fine, the neighboring radiobutton becomes active and shows what you need, but if you switch to another tab and click again, the Online button does not become active. Can you please tell me. how best to implement it?
