закончил inputs
This commit is contained in:
Kirill Pet
@@ -476,6 +476,424 @@ button{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.label-name{
|
||||
margin-bottom: 8px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
color: var(--text-black);
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-input__error{
|
||||
margin-top: 4px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 133%;
|
||||
|
||||
color: #f60909;
|
||||
|
||||
display: none;
|
||||
}
|
||||
.form-input__error--absolute{
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
}
|
||||
.modal-form__content.check .form__input:invalid{
|
||||
border-color: #f60909;
|
||||
}
|
||||
.modal-form__content.check .form__input:invalid + .form-input__error{
|
||||
display: block;
|
||||
}
|
||||
.modal-form__content.check .form-input-phone__input:invalid + .form-input__error{
|
||||
display: block;
|
||||
}
|
||||
.form-input__phone{
|
||||
padding: 12px 16px 12px ;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--text-black);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.form-input__phone.focus{
|
||||
outline: 1px solid var(--text-black);
|
||||
}
|
||||
.form-input-phone__icon{
|
||||
height: 16px;
|
||||
width: 28px;
|
||||
|
||||
background-size: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.form-input-phone__icon::after{
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
|
||||
width: 8px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
background-image: url(../img/svg/main/triangle-grey.svg);
|
||||
}
|
||||
.form-input-phone__code{
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
}
|
||||
.form-input-phone__code::before{
|
||||
content: '+';
|
||||
}
|
||||
.form-input-phone__input{
|
||||
margin-left: 6px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.form-input-phone__list{
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
left: 8px;
|
||||
|
||||
width: 280px;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
transition: opacity .2s ease-out;
|
||||
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
border-radius: 20px;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.form-input-phone__list.active{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.form-input-phone-list__search{
|
||||
width: 100%;
|
||||
|
||||
padding: 12px 16px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
|
||||
border-left: 1px solid var(--background-black);
|
||||
border-right: 1px solid var(--background-black);
|
||||
border-top: 1px solid var(--background-black);
|
||||
border-radius: 20px 20px 0 0;
|
||||
|
||||
background: var(--background-white);
|
||||
}
|
||||
.form-input-phone-list__search::placeholder{
|
||||
color: var(--text-6);
|
||||
}
|
||||
.form-input-phone-list__content{
|
||||
width: 100%;
|
||||
max-height: 224px;
|
||||
|
||||
padding: 24px 16px;
|
||||
|
||||
border: 1px solid var(--background-black);
|
||||
border-top: none;
|
||||
border-radius: 0 0 20px 20px;
|
||||
|
||||
background: var(--background-white);
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
.form-input-phone-list__item{
|
||||
margin-top: 14px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-input-phone-list__item:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.form-input-phone-list-item__icon{
|
||||
width: 16px;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
.form-input-phone-list-item__name{
|
||||
margin-left: 8px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
}
|
||||
.form-input-phone-list-item__code{
|
||||
margin-left: 8px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
}
|
||||
.form-input-phone-list-item__code::before{
|
||||
content: '+';
|
||||
}
|
||||
.form-input__two{
|
||||
padding: 2px;
|
||||
|
||||
display: flex;
|
||||
|
||||
border-radius: 20px;
|
||||
background: var(--gradient-turquoise);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.form-input-two__oval{
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
|
||||
width: 50%;
|
||||
height: calc(100% - 4px);
|
||||
|
||||
border-radius: 18px;
|
||||
|
||||
background: var(--background-white);
|
||||
transition: left .2s ease-out;
|
||||
}
|
||||
.form-input-two__button{
|
||||
width: 50%;
|
||||
|
||||
padding: 10px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
.form-input-two__input{
|
||||
display: none;
|
||||
}
|
||||
.form-input__radio{
|
||||
padding: 16px;
|
||||
}
|
||||
.form-input-radio__item{
|
||||
margin-top: 14px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.form-input-radio__item:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.form-input-radio__circle{
|
||||
padding: 2px;
|
||||
|
||||
width: 20px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--gradient-blue);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.form-input-radio__item.active .form-input-radio__circle::before{
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
|
||||
width: 12px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--gradient-blue);
|
||||
}
|
||||
.form-input-radio-circle__content{
|
||||
width: 16px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--background-white);
|
||||
}
|
||||
.form-input-radio__title{
|
||||
margin-left: 8px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
.form-input-radio__input{
|
||||
display: none;
|
||||
}
|
||||
.form-input__list{
|
||||
position: relative;
|
||||
}
|
||||
.form-input__list::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 21.5px;
|
||||
right: 19.5px;
|
||||
width: 13px;
|
||||
height: 8px;
|
||||
background-image: url(../img/svg/main/arrow-black.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
pointer-events: none;
|
||||
}
|
||||
.form-input-list__input{
|
||||
width: 100%;
|
||||
|
||||
border-radius: 20px;
|
||||
padding: 12px 16px;
|
||||
padding-right: 40px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
|
||||
border: 1px solid var(--text-black);
|
||||
}
|
||||
|
||||
.form-input-list__input::placeholder{
|
||||
color: var(--text-grey);
|
||||
}
|
||||
.form-input-list__block-content{
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
max-height: 192px;
|
||||
height: 0;
|
||||
|
||||
border-radius: 20px;
|
||||
background-color: var(--background-white);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
transition: height .2s ease-out;
|
||||
}
|
||||
.form-input-list__block-content.active{
|
||||
border: 1px solid var(--background-black);
|
||||
}
|
||||
.form-input-list__content{
|
||||
margin: 8px 16px;
|
||||
|
||||
max-height: 176px;
|
||||
|
||||
padding-right: 16px;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
.form-input-list__content::-webkit-scrollbar{
|
||||
border-radius: 8px;
|
||||
width: 4px;
|
||||
background: rgba(204, 204, 204, 0.2);
|
||||
}
|
||||
.form-input-list__content::-webkit-scrollbar-thumb{
|
||||
border-radius: 8px;
|
||||
background: var(--background-9);
|
||||
}
|
||||
.form-input-list__content
|
||||
.form-input-list__item{
|
||||
margin-top: 16px;
|
||||
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.form-input-list__item:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.form-input-list__item.active{
|
||||
background: rgba(204, 204, 204, 0.2);
|
||||
}
|
||||
.form-input-list-item__text{
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
}
|
||||
.form-input-list-item__box{
|
||||
width: 20px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
padding: 2px;
|
||||
|
||||
border-radius: 4px;
|
||||
|
||||
background: var(--gradient-blue);
|
||||
}
|
||||
.form-input-list-item-box__content{
|
||||
width: 16px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
border-radius: 2px;
|
||||
|
||||
background: var(--background-white);
|
||||
}
|
||||
.form-input-list__item.active .form-input-list-item-box__content{
|
||||
background: var(--gradient-blue);
|
||||
}
|
||||
|
||||
/* .form-input-radio__ */
|
||||
/* form */
|
||||
|
||||
|
||||
@@ -1212,24 +1630,26 @@ button{
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.notification{
|
||||
.modal-form{
|
||||
width: 600px;
|
||||
|
||||
padding: 24px;
|
||||
|
||||
border-radius: 20px;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.notification--white{
|
||||
.modal-form--white{
|
||||
border: 1px solid var(--background-black);
|
||||
background: var(--background-white);
|
||||
}
|
||||
.notification--green-gradient{
|
||||
.modal-form--green-gradient{
|
||||
background: var(--gradient-blue);
|
||||
}
|
||||
.notification--width-584{
|
||||
.modal-form--width-584{
|
||||
width: 584px;
|
||||
}
|
||||
.notification__close{
|
||||
.modal-form__close{
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
@@ -1246,13 +1666,13 @@ button{
|
||||
|
||||
transition: opacity .2s ease-out;
|
||||
}
|
||||
.notification__close--white{
|
||||
.modal-form__close--white{
|
||||
background-image: url(../img/svg/main/white-x.svg);
|
||||
}
|
||||
.notification__close:hover{
|
||||
.modal-form__close:hover{
|
||||
opacity: .8;
|
||||
}
|
||||
.notification__title{
|
||||
.modal-form__title{
|
||||
padding-right: 50px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
@@ -1262,50 +1682,69 @@ button{
|
||||
text-transform: uppercase;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
.notification__text--center{
|
||||
.modal-form__text--center{
|
||||
text-align: center;
|
||||
}
|
||||
.notification__text--center-pc{
|
||||
.modal-form__text--center-pc{
|
||||
text-align: center;
|
||||
}
|
||||
.notification__title--green-gradient{
|
||||
.modal-form__title--green-gradient{
|
||||
background: var(--gradient-blue);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.notification__title--white{
|
||||
.modal-form__title--white{
|
||||
color: var(--text-white);
|
||||
}
|
||||
.notification__element{
|
||||
.modal-form__element{
|
||||
margin-top: 24px;
|
||||
}
|
||||
.notification__element--center{
|
||||
.modal-form__element--center{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.notification__element--top-40{
|
||||
.modal-form__element--top-40{
|
||||
margin-top: 40px;
|
||||
}
|
||||
.notification__text{
|
||||
.modal-form__text{
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
}
|
||||
.notification__text--weight-500{
|
||||
.modal-form__text--weight-500{
|
||||
font-weight: 500;
|
||||
}
|
||||
.notification__text--white{
|
||||
.modal-form__text--white{
|
||||
color: var(--text-white);
|
||||
}
|
||||
.notification__img{
|
||||
.modal-form__img{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
|
||||
object-fit: contain;
|
||||
}
|
||||
.modal-form__content{
|
||||
margin-top: 40px;
|
||||
}
|
||||
.modal-form-content__line{
|
||||
margin-top: 24px;
|
||||
}
|
||||
.modal-form-content__line:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.modal-form-content__line--two{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.modal-form-content__line--two .modal-form-content-line__element{
|
||||
width: calc(50% - 12px);
|
||||
}
|
||||
.modal-form__buttons{
|
||||
margin-top: 32px;
|
||||
}
|
||||
/* modal */
|
||||
|
||||
/* toggle */
|
||||
|
||||
13
assets/img/svg/country/ar.svg
Normal file
13
assets/img/svg/country/ar.svg
Normal file
@@ -0,0 +1,13 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_230_9775)">
|
||||
<path d="M0 0H16V5.33437H0V0Z" fill="#D90012"/>
|
||||
<path d="M0 5.33447H16V10.6657H0V5.33447Z" fill="#0033A0"/>
|
||||
<path d="M0 10.6655H16V15.9999H0V10.6655Z" fill="#F2A800"/>
|
||||
</g>
|
||||
<rect x="0.1" y="0.1" width="15.8" height="15.8" stroke="#999999" stroke-width="0.2"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_230_9775">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 502 B |
13
assets/img/svg/country/ru.svg
Normal file
13
assets/img/svg/country/ru.svg
Normal file
@@ -0,0 +1,13 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_230_9627)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H16V16H0V0Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5.33447H16V16.0001H0V5.33447Z" fill="#0039A6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 10.6655H16V15.9999H0V10.6655Z" fill="#D52B1E"/>
|
||||
</g>
|
||||
<rect x="0.1" y="0.1" width="15.8" height="15.8" stroke="#999999" stroke-width="0.2"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_230_9627">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 615 B |
3
assets/img/svg/main/triangle-grey.svg
Normal file
3
assets/img/svg/main/triangle-grey.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.75 5.25L1.25 2.75L6.25 2.75L3.75 5.25Z" fill="#999999"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 168 B |
@@ -121,4 +121,5 @@ export function toggleHeader(button, content, blockheight, removeBlock, removeCl
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// function
|
||||
146
assets/js/gp-form.js
Normal file
146
assets/js/gp-form.js
Normal file
@@ -0,0 +1,146 @@
|
||||
'use strict';
|
||||
|
||||
inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', '.form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code');
|
||||
|
||||
function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode) {
|
||||
let inputs = document.querySelectorAll(main);
|
||||
|
||||
inputs.forEach(e => {
|
||||
let thisMainFlag = e.querySelector(mainFlag),
|
||||
thisMainCode = e.querySelector(mainCode),
|
||||
thisInput = e.querySelector(input),
|
||||
thisList = e.querySelector(list),
|
||||
thisSelects = e.querySelectorAll(selects);
|
||||
|
||||
e.onclick = function (event) {
|
||||
thisInput.focus();
|
||||
|
||||
thisList.classList.add('active');
|
||||
}
|
||||
|
||||
thisSelects.forEach(e => {
|
||||
let newIcon = e.querySelector(selectIcon),
|
||||
newCode = e.querySelector(selectCode);
|
||||
|
||||
e.onclick = function () {
|
||||
thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`;
|
||||
thisMainCode.textContent = newCode.textContent;
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
thisList.classList.remove('active');
|
||||
}, 0);
|
||||
}
|
||||
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
checkPhone('.form-input-phone__input');
|
||||
|
||||
function checkPhone(input) {
|
||||
document.querySelector(input).addEventListener('input', function(event) {
|
||||
let text = event.target.value;
|
||||
let length = text.length;
|
||||
let newSymbol = event.data;
|
||||
|
||||
if (!(/^\d+$/.test(text.replaceAll(' ', '')))) {
|
||||
event.target.value = text.slice(0, -1);
|
||||
return;
|
||||
}
|
||||
|
||||
if (length == 4 || length == 8) {
|
||||
if (newSymbol != null) {
|
||||
event.target.value = text.slice(0, -1) + ' ' + newSymbol;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
inputTwo('.form-input__two', '.form-input-two__button', '.form-input-two__oval', '.form-input-two__input')
|
||||
|
||||
function inputTwo(inputTwo, button, oval, input) {
|
||||
let inputTwos = document.querySelectorAll(inputTwo);
|
||||
|
||||
inputTwos.forEach(e => {
|
||||
let thisButtons = e.querySelectorAll(button),
|
||||
thisOval = e.querySelector(oval),
|
||||
thisInput = e.querySelector(input),
|
||||
thisMain = e;
|
||||
|
||||
thisButtons.forEach(button => {
|
||||
button.onclick = function () {
|
||||
let newLeft = button.clientWidth;
|
||||
let newValue = button.textContent;
|
||||
|
||||
if (button.classList.contains('alternative')) {
|
||||
thisMain.classList.add('alternative');
|
||||
thisInput.value = newValue;
|
||||
thisOval.style.left = `${newLeft}px`;
|
||||
}else{
|
||||
thisMain.classList.remove('alternative');
|
||||
thisInput.value = newValue;
|
||||
thisOval.style.left = `2px`;
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input')
|
||||
|
||||
function inputRadio(main ,item, textClass, input) {
|
||||
let inputRadios = document.querySelectorAll(main);
|
||||
|
||||
inputRadios.forEach(inputRadio => {
|
||||
let items = inputRadio.querySelectorAll(item),
|
||||
thisInput = inputRadio.querySelector(input);
|
||||
|
||||
items.forEach(radio => {
|
||||
let thisText = radio.querySelector(textClass).textContent;
|
||||
|
||||
radio.onclick = function () {
|
||||
if (inputRadio.querySelector(`${item}.active`)) {
|
||||
inputRadio.querySelector(`${item}.active`).classList.remove('active');
|
||||
}
|
||||
thisInput.value = thisText;
|
||||
radio.classList.add('active');
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content');
|
||||
|
||||
function listInputRadio(main ,item, textClass, input, content, block) {
|
||||
let listInputRadios = document.querySelectorAll(main);
|
||||
|
||||
listInputRadios.forEach(listInputRadio => {
|
||||
let thisInput = listInputRadio.querySelector(input),
|
||||
items = listInputRadio.querySelectorAll(item),
|
||||
thisContent = listInputRadio.querySelector(content),
|
||||
thisBlock = listInputRadio.querySelector(block);
|
||||
|
||||
thisInput.onclick = function () {
|
||||
thisBlock.classList.add('active');
|
||||
thisBlock.style.height = '192px';
|
||||
}
|
||||
|
||||
items.forEach(item => {
|
||||
item.onclick = function () {
|
||||
let newText = item.querySelector(textClass).textContent;
|
||||
|
||||
thisInput.value = newText;
|
||||
|
||||
if (thisContent.querySelector('.active')) {
|
||||
thisContent.querySelector('.active').classList.remove('active');
|
||||
}
|
||||
|
||||
item.classList.add('active');
|
||||
|
||||
thisBlock.classList.remove('active');
|
||||
thisBlock.style.height = '0px';
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user