<?php
$terms = get_terms(
[
'taxonomy' => 'product_cat',
'hide_empty' => false,
'exclude' => [17], // uncategorized id
'parent' => 0
]
);
foreach($terms as $idx=>$t) { // main categories
$termsLvl1 = get_terms(
[
'taxonomy' => 'product_cat',
'hide_empty' => false,
'exclude' => [17],
'parent' => $t->term_id
]
);
echo '
<div class="brxe-block tab-pane" role="tabpanel" tabindex="0">
<div class="al_tab_content__title mobile">
<button class="mobile go_back">
<svg class="back_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none">
<path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5" stroke="currentcolor"></path>
</svg> Tillbaka
</button>
</div>
<a href="' . get_term_link($t) . '"> Se alla ' . $t->name . '
<svg class="arrow_se_alla" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none">
<path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5" stroke="currentcolor"></path>
</svg>
</a>
<div class="al_tab_content__subMenu mobile">
';
foreach($termsLvl1 as $t1){ // sub category lvl 1
$termsLvl2 = get_terms(
[
'taxonomy' => 'product_cat',
'hide_empty' => false,
'exclude' => [17], // uncategorized id
'parent' => $t1->term_id
]
);
echo '
<div class="col mobile">
<div class="cat_1_title mobile">
<span class="sub_cats_1 mobile">' . $t1->name . '</span>
<svg class="arrow_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none">
<path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5" stroke="currentcolor"></path>
</svg>
</div>
<div class="sub_cats_2 mobile">
<a class="show_all" href="' . get_term_link($t1) . '">Visa alla inom ' . $t1->name . '</a>
';
if(!empty($termsLvl2)){
foreach($termsLvl2 as $t2){
echo '<a href="' . get_term_link($t2) . '">' . $t2->name . '</a>';
}
}
echo '
</div>
</div>
';
}
echo '</div></div>';
}
?>
<script defer>
document.addEventListener("DOMContentLoaded", function () {
// Accordion behavior
const accordions = document.querySelectorAll('.col.mobile');
accordions.forEach(acc => {
acc.querySelector('.cat_1_title.mobile').addEventListener('click', function () {
// close all others
accordions.forEach(other => {
if (other !== acc) {
other.classList.remove('active');
}
});
// toggle clicked
acc.classList.toggle('active');
});
});
// Toggle underline for .show_all when clicked
document.querySelectorAll('.show_all').forEach(link => {
link.addEventListener('click', function () {
document.querySelectorAll('.show_all.active').forEach(other => {
other.classList.remove('active');
});
this.classList.add('active');
});
});
});
</script>.brxe-tabs-nested{
transition: translate 350ms ease;
}
svg.arrow_se_alla{
width: 1rem;
rotate: -90deg;
translate: 0 3px;
}
.al_tab_content__title.mobile{
padding-bottom: 1rem;
display: flex;
flex-direction: column;
row-gap: 2rem;
button:hover{
text-decoration-line: underline;
-webkit-text-decoration-line: underline;
text-decoration-color: black;
-webkit-text-decoration-color: black;
}
& + a:hover{
text-decoration-line: underline;
-webkit-text-decoration-line: underline;
text-decoration-color: black;
-webkit-text-decoration-color: black;
}
button{
background-color: transparent;
padding-bottom: 1.2rem;
color: black;
svg.back_arrow{
translate: 0 1.5px;
width: 1rem;
rotate: 90deg;
}
}
}
.al_tab_content__subMenu.mobile{
display: flex;
flex-direction: column;
row-gap: 0.5rem;
border-top: 0.07rem solid rgba(0,0,0,1);
padding-top: 1rem;
.col.mobile{
display: flex;
flex-direction: column;
padding-block: 0.7rem;
cursor: pointer;
.cat_1_title.mobile {
display: flex;
justify-content: space-between;
span{
font-weight: 900;
}
.sub_cats_1:hover {
text-decoration-color: white;
}
.arrow_icon{
display: inline-block;
rotate: 0deg;
transform-origin: center;
width: 1rem;
}
}
.sub_cats_2.mobile{
display: none;
flex-direction: column;
}
&.active{
.cat_1_title.mobile{
.arrow_icon{
rotate: 180deg;
}
}
.sub_cats_2.mobile{
display: flex;
&:hover{
text-decoration: none;
}
a:hover{
text-decoration-line: underline;
-webkit-text-decoration-line: underline;
text-decoration-color: black;
-webkit-text-decoration-color: black;
}
}
}
}
}
.show_all {
margin-top: 4px;
}
.show_all.active {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
}
/* Remove blue tap highlight on mobile */
* {
-webkit-tap-highlight-color: transparent;
}
/* Remove default focus outline */
.col.mobile:focus,
.col.mobile:active,
a:focus,
a:active,
button:focus,
button:active {
outline: none !important;
box-shadow: none !important;
}
