<?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;
}
Golvbrunn Brage är en golvbrunn med 75
mm bottenutlopp för installation i trä- eller
betongbjälklag. Golvbrunnen levereras med
ett urtagbart golvbrunnsvattenlås,
automatisk klämring och plastsil.
Golvbrunnen är försedd med ett skyddslock
som är avsett för att förhindra gjutning och
flytspackel från att komma ner i
golvbrunnen.
Den automatiska klämringen används
till både tätskikt och plastmatta. Den
är en självjusterande klämring för
plastmattor med tjocklek 1,5 mm till 2mm.
532,90 kr
Golvbrunn Brage är en golvbrunn med 75
mm bottenutlopp för installation i trä- eller
betongbjälklag. Golvbrunnen levereras med
ett urtagbart golvbrunnsvattenlås,
automatisk klämring och plastsil.
Golvbrunnen är försedd med ett skyddslock
som är avsett för att förhindra gjutning och
flytspackel från att komma ner i
golvbrunnen.
Den automatiska klämringen används
till både tätskikt och plastmatta. Den
är en självjusterande klämring för
plastmattor med tjocklek 1,5 mm till 2mm.
