Project-Pro/brpp.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change accordion logic

Browse Source
This commit is contained in:
Roman Pyrih
2025-09-16 10:15:08 +02:00
parent 2a3ed50e96
commit a60adef6e8
5 changed files with 245 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
wp-content/themes/brpp-prawo-podatki/css/custom.css
View File

@@ -791,6 +791,10 @@ article.article-card .article-card--wrapper .article-card--content .article-card
cursor: pointer;
}
.c-acc-advanced .c-acc--item .c-acc--head {
cursor: pointer;
}
body.page-id-25 main {
margin-top: 60px;
}
@@ -2509,74 +2513,42 @@ body.page-id-54 main .box-2 .row-2 .t-row-2 {
row-gap: 40px;
}
}
@media (min-width: 992px) {
body.page-id-54 main .box-2 .row-2 .t-row .tab-description {
padding-left: 48px;
border-left: 1px solid #d9ba5c;
}
body.page-id-54 main .box-2 .row-2 .t-row-2 .t-col-1 .c-acc-advanced .c-acc--item:not(:last-child) {
border-bottom: 1px solid #6a6a6a;
}
@media (max-width: 991px) {
body.page-id-54 main .box-2 .row-2 .t-row .tab-description {
padding-top: 40px;
border-top: 1px solid #d9ba5c;
}
body.page-id-54 main .box-2 .row-2 .t-row-2 .t-col-2 .c-acc-advanced .c-acc--item {
display: none;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--head {
margin-bottom: 24px;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--head h3 {
color: #d9ba5c;
font-weight: 400;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.48px;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--text {
margin-bottom: 40px;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--text p {
color: #ffffff;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--text p:last-child {
margin-bottom: 0;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced {
padding: 0;
margin: 0;
}
@media (min-width: 992px) {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced {
margin-right: 30px;
max-width: 630px;
}
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item:not(:last-child) {
border-bottom: 1px solid #6a6a6a;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item.active .c-acc--head {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item.active .c-acc--head {
padding-left: 27px;
transition-delay: 0ms;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item.active .c-acc--head .icon {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item.active .c-acc--head .icon {
opacity: 1;
visibility: visible;
transition-delay: 250ms;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item.active .c-acc--head span {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item.active .c-acc--head span {
color: #d9ba5c;
transition-delay: 0ms;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--head {
position: relative;
transition: all 250ms ease-in-out;
cursor: pointer;
transition-delay: 250ms;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .icon {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--head .icon {
position: absolute;
display: inline-block;
width: 12px;
@@ -2588,7 +2560,7 @@ body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .icon
visibility: hidden;
transition: all 250ms ease-in-out;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .icon::before {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--head .icon::before {
content: "";
position: absolute;
top: 50%;
@@ -2598,7 +2570,7 @@ body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .icon
background: #d9ba5c;
transform: translateY(-50%);
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .icon::after {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--head .icon::after {
content: "";
position: absolute;
top: 50%;
@@ -2608,7 +2580,7 @@ body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .icon
background: #d9ba5c;
transform: translateY(-50%) translateX(-50%);
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head span {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--head span {
display: block;
padding: 16px 0;
color: #ffffff;
@@ -2620,23 +2592,45 @@ body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head span
transition-delay: 250ms;
}
@media (min-width: 576px) {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head span {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--head span {
font-size: 18px;
}
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--body {
display: none;
@media (min-width: 992px) {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--body {
padding-left: 48px;
border-left: 1px solid #d9ba5c;
}
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--body .c-acc--body-text {
padding-bottom: 16px;
@media (max-width: 991px) {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--body {
padding-top: 40px;
border-top: 1px solid #d9ba5c;
}
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--body .c-acc--body-text p {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--body .tab-description--head {
margin-bottom: 24px;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--body .tab-description--head h3 {
color: #d9ba5c;
font-weight: 400;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.48px;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--body .tab-description--text {
margin-bottom: 40px;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--body .tab-description--text p {
color: #ffffff;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--body .tab-description--text p:last-child {
margin-bottom: 0;
}
body.page-id-54 main .box-3 {
position: relative;
background: #fafafa;

2
wp-content/themes/brpp-prawo-podatki/css/custom.css.map
View File

File diff suppressed because one or more lines are too long

90
wp-content/themes/brpp-prawo-podatki/css/custom.scss
View File

@@ -809,6 +809,14 @@ article.article-card {
}
}
}
.c-acc-advanced {
.c-acc--item {
.c-acc--head {
cursor: pointer;
}
}
}
//* END Global
//* Home
@@ -2192,47 +2200,28 @@ body.page-id-54 {
flex-direction: column;
row-gap: 40px;
}
}
.tab-description {
@include respond-above(lg) {
padding-left: 48px;
border-left: 1px solid $cGold;
}
@include respond-below(lg) {
padding-top: 40px;
border-top: 1px solid $cGold;
}
.tab-description--head {
margin-bottom: 24px;
h3 {
color: $cGold;
font-weight: 400;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.48px;
.t-col {
&-1 {
.c-acc-advanced {
.c-acc--item {
&:not(:last-child) {
border-bottom: 1px solid #6a6a6a;
}
}
}
}
}
.tab-description--text {
margin-bottom: 40px;
p {
color: $cWhite;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
&:last-child {
margin-bottom: 0;
&-2 {
.c-acc-advanced {
.c-acc--item {
display: none;
}
}
}
}
}
.c-acc {
.c-acc-advanced {
padding: 0;
margin: 0;
@@ -2241,10 +2230,6 @@ body.page-id-54 {
max-width: 630px;
}
.c-acc--item {
&:not(:last-child) {
border-bottom: 1px solid #6a6a6a;
}
&.active {
.c-acc--head {
padding-left: 27px;
@@ -2322,16 +2307,39 @@ body.page-id-54 {
}
.c-acc--body {
display: none;
@include respond-above(lg) {
padding-left: 48px;
border-left: 1px solid $cGold;
}
@include respond-below(lg) {
padding-top: 40px;
border-top: 1px solid $cGold;
}
.tab-description--head {
margin-bottom: 24px;
h3 {
color: $cGold;
font-weight: 400;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.48px;
}
}
.tab-description--text {
margin-bottom: 40px;
.c-acc--body-text {
padding-bottom: 16px;
p {
color: $cWhite;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
&:last-child {
margin-bottom: 0;
}
}
}
}

104
wp-content/themes/brpp-prawo-podatki/js/custom.js
View File

@@ -140,6 +140,110 @@ jQuery(function ($) {
})
})
// jQuery(function ($) {
// $('body').on(
// 'click',
// '.c-acc-advanced .c-acc--item .c-acc--head',
// function (e) {
// e.preventDefault()
// let $head = $(this)
// let $acc = $head.closest('.c-acc-advanced')
// let $item = $head.closest('.c-acc--item')
// let acc_parent_id = $acc.attr('acc_parent_id')
// let acc_parent_item_id = $item.attr('acc_parent_item_id')
// $acc.find('.c-acc--item').not($item).removeClass('active')
// $item.toggleClass('active')
// $acc
// .find('.c-acc--item .c-acc--item')
// .not($head.next('.c-acc--item'))
// .slideUp(200)
// $head.next('.c-acc--item').slideToggle(200)
// let $targetBody = $head
// .closest('.c-acc-group')
// .find(`.c-acc-advanced[acc_child_id='${acc_parent_id}']`)
// .find(`.c-acc--item[acc_child_item_id='${acc_parent_item_id}']`)
// $targetBody
// .addClass('active')
// .siblings('.c-acc--item')
// .removeClass('active')
// .slideUp(200)
// $targetBody.slideToggle(200)
// }
// )
// })
jQuery(function ($) {
$('body').on(
'click',
'.c-acc-advanced .c-acc--item .c-acc--head',
function (e) {
e.preventDefault()
let $head = $(this)
let $acc = $head.closest('.c-acc-advanced')
let $item = $head.closest('.c-acc--item')
let acc_parent_id = $acc.attr('acc_parent_id')
let acc_parent_item_id = $item.attr('acc_parent_item_id')
$acc.find('.c-acc--item').not($item).removeClass('active')
$item.toggleClass('active')
$acc
.find('.c-acc--item .c-acc--item')
.not($head.next('.c-acc--item'))
.stop(true, true)
.slideUp(200)
$head.next('.c-acc--item').stop(true, true).slideToggle(200)
if (
typeof acc_parent_id !== 'undefined' &&
typeof acc_parent_item_id !== 'undefined'
) {
let $childAdvanced = $head
.closest('.c-acc-group')
.find(`.c-acc-advanced[acc_child_id='${acc_parent_id}']`)
if ($childAdvanced.length) {
let $targetItem = $childAdvanced.find(
`.c-acc--item[acc_child_item_id='${acc_parent_item_id}']`
)
$childAdvanced
.find('.c-acc--item')
.not($targetItem)
.stop(true, true)
.slideUp(200)
.removeClass('active')
if ($targetItem.length) {
$targetItem.stop(true, true).slideToggle(200).toggleClass('active')
}
}
}
}
)
$('.c-acc-advanced').each(function () {
let $acc = $(this)
if ($acc.find('.c-acc--item.active').length === 0) {
let $firstHead = $acc.find('.c-acc--item .c-acc--head').first()
if ($firstHead.length) {
$firstHead.trigger('click')
}
}
})
})
jQuery(function ($) {
$('body').on('click', '#nav-menu-toggle', function (e) {
e.preventDefault()

67
wp-content/themes/brpp-prawo-podatki/page-54.php
View File

@@ -49,8 +49,8 @@
<?php endforeach; ?>
</ul>
<div class="c-tabs--content">
<?php foreach ($box2['tabs'] as $i => $tab) : ?>
<div tab_id="<?= $i + 1; ?>" class="c-tab--item" <?= $i === 0 ? 'style="display: block;"' : ''; ?>>
<?php foreach ($box2['tabs'] as $tab_id => $tab) : ?>
<div tab_id="<?= $tab_id + 1; ?>" class="c-tab--item" <?= $i === 0 ? 'style="display: block;"' : ''; ?>>
<div class="t-row t-row-1">
<div class="t-col t-col-1">
<div class="t-head">
@@ -61,36 +61,59 @@
</div>
</div>
</div>
<div class="t-row t-row-2">
<div class="t-row t-row-2 c-acc-group">
<div class="t-col t-col-1">
<ol class="c-acc">
<?php foreach ($tab['accordion'] as $i => $item) : ?>
<li class="c-acc--item">
<ol class="c-acc-advanced" acc_parent_id="<?= $tab_id + 1; ?>">
<?php foreach ($tab['accordion'] as $parent_item_id => $item) : ?>
<li class="c-acc--item" acc_parent_item_id="<?= $parent_item_id + 1; ?>">
<div class="c-acc--head">
<i class="icon"></i>
<span><?= esc_html($item['title']); ?></span>
</div>
<div class="c-acc--body">
<div class="c-acc--body-text">
<p><?= esc_html($item['text']); ?></p>
</div>
</div>
</li>
<?php endforeach; ?>
</ol>
</div>
<div class="t-col t-col-2">
<div class="tab-description">
<div class="tab-description--head">
<h3><?= esc_html($tab['card_description_second']['title']); ?></h3>
</div>
<div class="tab-description--text">
<?= $tab['card_description_second']['text']; ?>
</div>
<a class="btn_2" href="<?php echo esc_url($tab['card_description_second']['btn']['url']); ?>" target="<?php echo esc_attr($tab['card_description_second']['btn']['target'] ?: '_self'); ?>">
<?php echo esc_html($tab['card_description_second']['btn']['title']); ?>
</a>
</div>
<ol class="c-acc-advanced" acc_child_id="<?= $tab_id + 1 ; ?>">
<?php foreach ($tab['accordion'] as $child_item_id => $item) :
$title = $item['accordion_data']['title'] ?? '';
$text = $item['accordion_data']['text'] ?? '';
$btn = $item['accordion_data']['btn'] ?? [];
$btn_url = $btn['url'] ?? '';
$btn_title = $btn['title'] ?? '';
$btn_target = $btn['target'] ?? '_self';
// if (empty($title) && empty($text) && empty($btn_url) && empty($btn_title)) {
// continue;
// }
?>
<li class="c-acc--item" acc_child_item_id="<?= $child_item_id + 1; ?>">
<div class="c-acc--body">
<?php if (!empty($title)) : ?>
<div class="tab-description--head">
<h3><?= esc_html($title); ?></h3>
</div>
<?php endif; ?>
<?php if (!empty($text)) : ?>
<div class="tab-description--text">
<?= wp_kses_post($text); ?>
</div>
<?php endif; ?>
<?php if (!empty($btn_url) && !empty($btn_title)) : ?>
<a class="btn_2"
href="<?= esc_url($btn_url); ?>"
target="<?= esc_attr($btn_target); ?>">
<?= esc_html($btn_title); ?>
</a>
<?php endif; ?>
</div>
</li>
<?php endforeach; ?>
</ol>
</div>
</div>
</div>