In template
<script>
jQuery(document).ready(function($) {
$('.checkbox').click(function() {
$(this).toggleClass('active');
});
$('i.xpnd').click(function() {
$(this).parent().toggleClass('active');
$('.checkbox.active').find("ul.depth").toggle('slow');
});
$('.link').click(function() {
$(this).toggleClass('active');
});
var url = window.location.href;
$('li.link').each(function() {
if ($('a',this).attr('href') == url) {
$(this).addClass('active');
$(this).parent().css( "display", "block" );
$(this).parents().addClass('checked');
}
});
$('li.checkbox').each(function() {
if ($('a',this).attr('href') == url) {
$(this).addClass('checked');
$('.checkbox.checked').find("ul.depth").css( "display", "block" );
}
});
});
</script>
<?php echo return_terms_index(); ?>
In functions.php
function return_terms_index() {
$taxonomies = array(
'training_cat',
);
$args = array(
'orderby' => 'name',
'order' => 'ASC',
'hide_empty' => false,
'fields' => 'all',
'parent' => 0,
'hierarchical' => true,
'child_of' => 0,
'pad_counts' => false,
'cache_domain' => 'core'
);
$terms = get_terms($taxonomies, $args);
$return .= '<ul class="trainingen">';
foreach ( $terms as $term ) {
// return terms (working)
$return .= sprintf(
'<li id="%1$s" class="checkbox"><a href="https://www.cls-trainingen.nl/opleidingen/?_training=%1$s">%2$s</a> <i class="xpnd fas fa-chevron-down"></i>',
$term->slug,
$term->name,
$term->description
);
$subterms = get_terms($taxonomies, array(
'parent' => $term->term_id,
'hide_empty' => false
));
$return .= '<ul class="depth" style="display: none;">';
foreach ( $subterms as $subterm ) {
//return sub terms (not working :( )
$return .= sprintf(
'<li id="category-%1$s" class="link"><a href="https://www.cls-trainingen.nl/opleidingen/?_training=%1$s" class="sublink">%2$s</a> <span class="cat-description">%3$s</span>',
$subterm->slug,
$subterm->name,
$subterm->description
);
$return .= '</li>'; //end subterms li
}
$return .= '</ul>'; //end subterms ul
$return .= '</li>'; //end terms li
} //end foreach term
$return .= '</ul>';
return $return;
}
style.less
.trainingen {
list-style: none;
margin: 0px;
padding: 0px;
text-decoration: none;
.expand {
position: absolute;
right: 10px;
top: 0;
&:after {
content: "\f054";
font-family: FontAwesome;
float: right;
color: @color_alt!important;
padding: 0px;
margin-top: 0px;
display: inline-block;
&:hover {
color: @color_links!important;
}
}
}
.checkbox {
position: relative;
background: none;
margin: 0px;
color: @color_alt;
font-weight: 500;
padding: 0px 25px 0px 25px;
border-bottom: 1px solid #f1f0ee;
line-height: 2em;
font-size: 16px;
overflow: hidden;
&.active, &.checked {
a {
color: @color_links!important;
text-decoration: none;
}
i.xpnd {
color: @color_links!important;
}
}
&:hover {
a {
color: @color_links!important;
text-decoration: none;
}
i.xpnd {
color: @color_links!important;
}
}
a {
color: inherit;
display: inline-block;
width: 91%;
}
@media @md_only {
font-size: 14px;
}
.depth {
margin: 0px;
list-style: none;
width: 130%;
padding: 0px 0px!important;
margin-left: -25px;
margin-right: -25px!important;
display: block;
.link {
background: none;
margin: 0px;
color: @color_links;
font-weight: 500;
padding: 0px 25px 0px 35px;
border-bottom: 1px solid #f1f0ee;
line-height: 2em;
&.checked, &:hover, &.active {
background: @color_links!important;
color: #fff!important;
a {
color: #fff!important;
}
}
}
}
}
.facetwp-depth .facetwp-depth {
//margin-left: 0px;
}
.facetwp-checkbox {
background: none;
margin: 0px;
color: @color_alt;
font-weight: 500;
padding: 0px 25px 0px 25px;
border-bottom: 1px solid #f1f0ee;
line-height: 2em;
font-size: 16px;
@media @md_only {
font-size: 14px;
}
&.checked {
background-image: none;
color: @color_links;
.facetwp-expand {
color: #fff;
&:after {
content: "\f054";
font-family: FontAwesome;
float: right;
color: @color_links!important;
padding: 0px;
margin-top: 0px;
display: inline-block;
&:hover {
color: @color_links!important;
}
}
}
}
&.expanded, &:hover {
background-image: none;
color: @color_links;
.facetwp-expand {
color: #fff;
&:after {
content: "\f078";
font-family: FontAwesome;
float: right;
color: @color_links!important;
padding: 0px;
margin-top: 0px;
display: inline-block;
&:hover {
color: @color_links!important;
}
}
}
}
}
.facetwp-depth {
.facetwp-checkbox {
background: none;
margin: 0px;
color: @color_links;
font-weight: 500;
padding: 0px 25px 0px 25px;
border-bottom: 1px solid #f1f0ee;
line-height: 2em;
&.checked, &:hover {
background: @color_links!important;
color: #fff;
}
}
}
}
#accordion #css #custom #dropdown #funtions #jQuery #less #php