<?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;
}
Diamir är 1000 mm i dimension med anslutningar upp till 600 mm. En brunn består av en brunnsbotten med olika anslutningar, mellanringar samt en överdel. De olika delarna byggs samman till önskad höjd. Beställs med anslutning för släta rör eller K2-KAN rör.
5 138,08 kr
