Post by Category Tab

//Php Code

<div class="flex-gallery">
        <?php
        $args = array(
            'taxonomy' => 'ab-category',
            'hide_empty' => 0,
            'orderby' => 'name',
            'order' => 'ASC'
        );
        $categories = get_categories($args);
        $act = 1;
        foreach ($categories as $category) {
            if ($act == 1) :
                $active = "active";
            else :
                $active = "";
            endif;
            ?>
            <div class="gallery-tabs <?php echo $active; ?>" data-id="<?php echo $category->slug; ?>">
                <?php echo $category->name; ?>
            </div>
            <?php
            $act++;
        }
        ?>
</div>

// Post show on categories hover

<div class="tab-pane-cover">
    <?php
    $act1 = 1;
    foreach ($categories as $category) {
        if ($act1 == 1) :
            $active = "active";
        else :
            $active = "";
        endif;
        ?>
        <div class="tab-pane <?php echo $active; ?>" id="<?php echo $category->slug; ?>">
            <div class="tab-pane-wrapper">
                <?php
                $catslug = $category->slug;
                $wp_query = new WP_Query(array(
                    'post_type' => 'post_gallery_ab',
                    'posts_per_page' => 20,
                    'tax_query' => array(
                        array(
                            'taxonomy' => 'ab-category',
                            'field' => 'slug',
                            'terms' => array($catslug),
                            'operator' => 'IN'
                        ),
                    ),
                ));

                while ($wp_query->have_posts()) :
                    $wp_query->the_post();
                    //$featured_img_url = get_the_post_thumbnail_url(get_the_ID(), 'large');
                    $images = get_field('after_before_gallery');
                    if ($images) {
                        //echo "<pre>"; print_r($images)
                        ?>

                        <?php foreach ($images as $image): ?>
                            <div class="gallery-tab-content">
                                <a href="<?php echo esc_url($image['url']); ?>" class="html5lightbox">
                                    <img src="<?php echo esc_url($image['sizes']['large']); ?>" alt="<?php echo esc_attr($image['filename']); ?>" />
                                </a>
                            </div>
                        <?php endforeach; ?>

                        <?php
                    }
                endwhile;
                wp_reset_postdata();
                ?>
            </div>
        </div>
        <?php
        $act1++;
    }
    ?>
</div>

<style>
    .tab-pane{
        display: none;
    }
    .tab-pane.active{
        display: block !important;
    }
</style>
<script>
    jQuery(".gallery-tabs").hover(function () {
        jQuery(".gallery-tabs").removeClass('active');
        jQuery(".tab-pane").removeClass('active');
        $tab_id = "#" + jQuery(this).attr("data-id");
        jQuery($tab_id).addClass("active");
        jQuery(this).addClass('active');
    });
</script>