I have a page with different prizes, divided over 4 categories. When the page loads, the first category gets the ‘active’ class and I need the corresponding prizes to show at that moment.
The code works when I click on one of the categories, but when the page loads, none of the prizes are showing. Is there a way to detect which category has the ‘active’ class and the show the right prizes?
This is the page: https://staging.mytimo.be/prijzen/
jQuery
JavaScript
x
var $prijzenArchief = !!$('.post-type-archive-prijzen')[0];
if ($prijzenArchief) {
$('.prijzen__filter ul li:first').addClass('active');
var tid = $(this).data('type-trigger');
var $current = $('.prijzen__items article[data-type="' + tid + '"]').toggle();
$('.prijzen__items article').not($current).hide();
//click handler
$('.prijzen__filter ul .filter-item').click(function() {
$('.prijzen__filter ul .filter-item').removeClass('active');
$(this).addClass('active');
var tid = $(this).data('type-trigger');
var $current = $('.prijzen__items article[data-type="' + tid + '"]').toggle();
$('.prijzen__items article').not($current).hide();
})
}
PHP
JavaScript
<div class="prijzen__filter">
<?php
$taxonomies = get_terms( array(
'taxonomy' => 'type',
'hide_empty' => false,
'order' => 'DESC',
'orderby' =>'date'
) );
if ( !empty($taxonomies) ) :
$output = '<ul>';
foreach( $taxonomies as $category ) {
if( $category->parent == 0 ) {
$output.= '<li class="filter-item" data-type-trigger="'. esc_attr( $category->slug ) .'">';
$output.= esc_attr( $category->name );
$output.='</li>';
}
}
$output.='</ul>';
echo $output;
endif;
?>
</div>
<div class="prijzen__items">
<?php
while ( have_posts() ) {
the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> data-type="<?php $terms = get_the_terms( $queried_post , 'type' );
foreach ( $terms as $term ) { ?><?php echo $term->slug; ?><?php } ?>">
<header class="entry-header">
<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
</header>
</article>
<?php } ?>
</div>
Advertisement
Answer
You can trigger the click event on your active item.
JavaScript
$('.prijzen__filter ul .filter-item.active').trigger('click');
Do this inside your $(document).ready(...);
call but after you add the active class and attach the click event handler.