Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

faq block and arrows

Browse Source
This commit is contained in:
shahboz
2024-09-08 14:19:37 +05:00
parent cc7b5c4091
commit 804d1c68ad
16 changed files with 115 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
assets/css/style.css
View File

@@ -11,6 +11,7 @@
--transition: .3s all ease;
--GR1: linear-gradient(22deg, #F44242 23.69%, #569EF0 66.57%);
--new-blue: #569EFF;
--border: 60px;
}
html{
scroll-behavior: smooth;
@@ -86,6 +87,13 @@ a:hover {
text-transform: uppercase;
color: var(--grey-black);
}
.section_title h1{
font-size: 82px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
color: var(--grey-black);
}
.section_title .back_link{
display: none;
}
@@ -688,12 +696,13 @@ label:has(input[type='checkbox']:checked) .checkmark::before{
background: var(--creme-white);
overflow: hidden;
opacity: 0;
z-index: -1;
visibility: hidden;
z-index: 3;
transition: var(--transition);
}
.modal.modal_open{
opacity: 1;
z-index: 3;
visibility: visible;
}
body:has(.modal_open){
overflow: hidden;
@@ -704,12 +713,13 @@ body:has(.modal_open){
inset: 0;
background-color: rgba(0, 0, 0, .5);
opacity: 0;
z-index: -1;
visibility: hidden;
z-index: 2;
transition: var(--transition);
}
body:has(.modal_open) .modal_back{
opacity: 1;
z-index: 1;
visibility: visible;
}
.modal_big{
max-width: 754px;
@@ -1036,7 +1046,6 @@ body:has(.modal_open) .modal_back{
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.for_border{
background-image: var(--GR1);
@@ -1062,6 +1071,7 @@ body:has(.modal_open) .modal_back{
.for_border .account_item{
background: var(--creme-white);
gap: 10px;
height: 100%;
}
.for_border:has(.account_item_big){
max-width: 34.4%;
@@ -1865,6 +1875,9 @@ body:has(.modal_open) .modal_back{
.section_title{
font-size: 48px;
}
.section_title h1{
font-size: 48px;
}
.section_desc {
font-size: 22px;
}
@@ -2073,6 +2086,9 @@ body:has(.modal_open) .modal_back{
.section_title {
font-size: 40px;
}
.section_title h1{
font-size: 40px;
}
.section_desc {
font-size: 18px;
}
@@ -2398,6 +2414,9 @@ body:has(.modal_open) .modal_back{
.section_title {
font-size: 26px;
}
.section_title h1{
font-size: 26px;
}
.section_desc {
font-size: 12px;
}
@@ -2557,7 +2576,7 @@ body:has(.modal_open) .modal_back{
bottom: 8px;
right: 22px;
}
.order .see_order svg{
.order .see_order img{
width: 6px;
height: 8px;
}
@@ -2634,6 +2653,7 @@ body:has(.modal_open) .modal_back{
.faq_item{
font-size: 12px;
padding: 0 14px;
border-width: 1px;
}
.faq_top {
padding: 25px 0;

3
assets/img/icons/arrdown.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 214 B

BIN
assets/img/icons/arrright.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 424 B

58
assets/js/main.js
View File

@@ -166,42 +166,42 @@ window.addEventListener('DOMContentLoaded', function(){
closeModalOnClick('.modal .plus', '.modal');
closeModalOnClick('.modal_back', '.modal');
// if (document.querySelector('.faq')) {
if (document.querySelector('.faq')) {
// let faqToggles = document.querySelectorAll('.faq_title, .faq_arr_down');
let faqToggles = document.querySelectorAll('.faq_title, .faq_arr_down');
// faqToggles.forEach(function(toggle) {
// toggle.addEventListener('click', function() {
// const faqTop = this.closest('.faq_top');
// const faqBody = faqTop.nextElementSibling;
faqToggles.forEach(function(toggle) {
toggle.addEventListener('click', function() {
const faqTop = this.closest('.faq_top');
const faqBody = faqTop.nextElementSibling;
// document.querySelectorAll('.faq_body').forEach(function(body) {
// if (body !== faqBody) {
// body.style.height = '0px';
// body.classList.remove('open');
document.querySelectorAll('.faq_body').forEach(function(body) {
if (body !== faqBody) {
body.style.height = '0px';
body.classList.remove('open');
// const otherArrow = body.previousElementSibling.querySelector('.faq_arr_down');
// if (otherArrow) {
// otherArrow.classList.remove('rotate');
// }
// }
// });
const otherArrow = body.previousElementSibling.querySelector('.faq_arr_down');
if (otherArrow) {
otherArrow.classList.remove('rotate');
}
}
});
// if (faqBody.classList.contains('open')) {
// faqBody.style.height = '0px';
// } else {
// faqBody.style.height = `${faqBody.scrollHeight}px`;
// }
if (faqBody.classList.contains('open')) {
faqBody.style.height = '0px';
} else {
faqBody.style.height = `${faqBody.scrollHeight}px`;
}
// faqBody.classList.toggle('open');
faqBody.classList.toggle('open');
// const faqArrow = faqTop.querySelector('.faq_arr_down');
// if (faqArrow) {
// faqArrow.classList.toggle('rotate');
// }
// });
// });
// }
const faqArrow = faqTop.querySelector('.faq_arr_down');
if (faqArrow) {
faqArrow.classList.toggle('rotate');
}
});
});
}
if (document.querySelector('.photo_image')) {
document.querySelectorAll('.photo_image input[type="file"]').forEach(input => {