Show posts of active category through jQuery

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

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

<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>

Answer

You can trigger the click event on your active item.

$('.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.

Advertisement

Answer