diff --git a/sass/pages/new-support.scss b/sass/pages/new-support.scss index 69f3c754..513dc950 100644 --- a/sass/pages/new-support.scss +++ b/sass/pages/new-support.scss @@ -248,10 +248,18 @@ display: flex; justify-content: space-between; align-items: center; + padding-top: 20rem; } &__tab-close { cursor: pointer; + + } + &__tab--1 { + display: none; + } + &__tab--2 { + display: none; } &__tab-row { diff --git a/templates/new-donate.html b/templates/new-donate.html index 7b8f4b80..dbcc7c10 100644 --- a/templates/new-donate.html +++ b/templates/new-donate.html @@ -170,967 +170,973 @@ @@ -1184,13 +1190,25 @@ const tabs03 = document.querySelector('.donate-services__tab'); const tabs03CloseBtn = document.querySelector('.donate-services__tab-close'); - openBtn.forEach(item => { - item.onclick = (event) => { + const tab101 = document.querySelector('.donate-services__tab--1'); + const tab102 = document.querySelector('.donate-services__tab--2'); + + openBtn[0].onclick = (event) => { tabs03.classList.remove('donate-services__tab--active') event.preventDefault() tabs03.classList.add('donate-services__tab--active') + tab101.style.display = 'block' + tab102.style.display = 'none' } - }) + + openBtn[1].onclick = (event) => { + tabs03.classList.remove('donate-services__tab--active') + event.preventDefault() + tabs03.classList.add('donate-services__tab--active') + tab102.style.display = 'block' + tab101.style.display = 'none' + } + tabs03CloseBtn.onclick = () => { tabs03.classList.remove('donate-services__tab--active') }