sanitize_title() function not working with advanced custom filed pro

Question

I am trying to use sanitize_title function with advanced custom field pro plugin but the jquery filter is not working as it works in html

html design output screenshots

enter image description here

enter image description here

html code

<section>
        <div class="container">
                <div class="heading">
                        <img class="heading-img" src="images/heading_logo.png" alt="">
                        <h2>Our Menu</h2>
                </div>

                <div class="row">
                        <div class="col-sm-12">
                                <ul class="selecton brdr-b-primary mb-70">
                                        <li><a class="active" href="#" data-select="*"><b>ALL</b></a></li>
                                        <li><a href="#" data-select="pizza"><b>PIZZA</b></a></li>
                                        <li><a href="#" data-select="pasta"><b>PASTA</b></a></li>
                                        <li><a href="#" data-select="salads"><b>SALADS</b></a></li>
                                        <li><a href="#" data-select="deserts"><b>DESERTS</b></a></li>
                                </ul>
                        </div><!--col-sm-12-->
                </div><!--row-->

                <div class="row">
                        <div class="col-md-6 food-menu pizza">
                                <div class="sided-90x mb-30 ">
                                        <div class="s-left"><img class="br-3" src="images/menu-1-120x120.jpg" alt="Menu Image"></div><!--s-left-->
                                        <div class="s-right">
                                                <h5 class="mb-10"><b>Pizza Margherita</b><b class="color-primary float-right">$12.00</b></h5>
                                                <p class="pr-70">Maecenas fermentum tortor id fringilla molestie. In hac habitasse platea dictumst. </p>
                                        </div><!--s-right-->
                                </div><!-- sided-90x -->
                        </div><!-- food-menu -->

                        <div class="col-md-6 food-menu pizza pasta">
                                <div class="sided-90x mb-30 ">
                                        <div class="s-left"><img class="br-3" src="images/menu-2-120x120.jpg" alt="Menu Image"></div><!--s-left-->
                                        <div class="s-right">
                                                <h5 class="mb-10"><b>Italian pasta</b><b class="color-primary float-right">$20.00</b></h5>
                                                <p class="pr-70">Proin dictum viverra varius. Etiam vulputate libero dui, at pretium elit elementum quis. </p>
                                        </div><!--s-right-->
                                </div><!-- sided-90x -->
                        </div><!-- food-menu -->

                        <div class="col-md-6 food-menu pasta">
                                <div class="sided-90x mb-30 ">
                                        <div class="s-left"><img class="br-3" src="images/menu-3-120x120.jpg" alt="Menu Image"></div><!--s-left-->
                                        <div class="s-right">
                                                <h5 class="mb-10"><b>Pizza Prosciuto</b><b class="color-primary float-right">$12.00</b></h5>
                                                <p class="pr-70">Maecenas fermentum tortor id fringilla molestie. In hac habitasse platea dictumst. </p>
                                        </div><!--s-right-->
                                </div><!-- sided-90x -->
                        </div><!-- food-menu -->

                        <div class="col-md-6 food-menu salads">
                                <div class="sided-90x mb-30">
                                        <div class="s-left"><img class="br-3" src="images/menu-4-120x120.jpg" alt="Menu Image"></div><!--s-left-->
                                        <div class="s-right">
                                                <h5 class="mb-10"><b>Broschettas</b><b class="color-primary float-right">$6.00</b></h5>
                                                <p class="pr-70">Proin dictum viverra varius. Etiam vulputate libero dui, at pretium elit elementum quis. </p>
                                        </div><!--s-right-->
                                </div><!-- sided-90x -->
                        </div><!-- food-menu -->
                        <div class="col-md-6 food-menu deserts">
                                <div class="sided-90x mb-30">
                                        <div class="s-left"><img class="br-3" src="images/menu-5-120x120.jpg" alt="Menu Image"></div><!--s-left-->
                                        <div class="s-right">
                                                <h5 class="mb-10"><b>Pizza Margherita</b><b class="color-primary float-right">$12.00</b></h5>
                                                <p class="pr-70">Maecenas fermentum tortor id fringilla molestie. In hac habitasse platea dictumst. </p>
                                        </div><!--s-right-->
                                </div><!-- sided-90x -->
                        </div><!-- food-menu -->

                        <div class="col-md-6 food-menu pizza">
                                <div class="sided-90x mb-30 ">
                                        <div class="s-left"><img class="br-3" src="images/menu-6-120x120.jpg" alt="Menu Image"></div><!--s-left-->
                                        <div class="s-right">
                                                <h5 class="mb-10"><b>Italian pasta</b><b class="color-primary float-right">$20.00</b></h5>
                                                <p class="pr-70">Proin dictum viverra varius. Etiam vulputate libero dui, at pretium elit elementum quis. </p>
                                        </div><!--s-right-->
                                </div><!-- sided-90x -->
                        </div><!-- food-menu -->

                        <div class="col-md-6 food-menu deserts">
                                <div class="sided-90x mb-30">
                                        <div class="s-left"><img class="br-3" src="images/menu-7-120x120.jpg"  alt="Menu Image"></div><!--s-left-->
                                        <div class="s-right">
                                                <h5 class="mb-10"><b>Pizza Prosciuto</b><b class="color-primary float-right">$12.00</b></h5>
                                                <p class="pr-70">Maecenas fermentum tortor id fringilla  molestie. In hac habitasse platea dictumst. </p>
                                        </div><!--s-right-->
                                </div><!-- sided-90x -->
                        </div><!-- food-menu -->

                        <div class="col-md-6 food-menu pasta">
                                <div class="sided-90x mb-30 ">
                                        <div class="s-left"><img class="br-3" src="images/menu-8-120x120.jpg" alt="Menu Image"></div><!--s-left-->
                                        <div class="s-right">
                                                <h5 class="mb-10"><b>Broschettas</b><b class="color-primary float-right">$6.00</b></h5>
                                                <p class="pr-70">Proin dictum viverra varius. Etiam vulputate libero dui, at pretium elit elementum quis. </p>
                                        </div><!--s-right-->
                                </div><!-- sided-90x -->
                        </div><!-- food-menu -->
                </div><!-- row -->

                <h6 class="center-text mt-40 mt-sm-20 mb-30"><a href="#" class="btn-primaryc plr-25"><b>SEE TODAYS MENU</b></a></h6>
        </div><!-- container -->
</section>

jquery code

function selectedActive(elem) {
        var selectedAttr = $(elem),
                selectionID = "." + $(selectedAttr).data("select");

        $(".selecton a").removeClass("active");
        $(selectedAttr).addClass("active");
        $(".food-menu").removeClass("active");

        if (selectionID == ".*") $(".food-menu").addClass("active");
        else $(selectionID).addClass("active");
}

wordpress output using acf plugin
enter image description here

all posts shows under deserts only and rest tabs shows blank

enter image description here

front-page.php

<?php get_header();?>
<?php $hero = get_field('hero'); ?>
<section class="bg-1 h-900x main-slider pos-relative">
        <div class="triangle-up pos-bottom"></div>
        <div class="container h-100">
                <div class="dplay-tbl">
                        <div class="dplay-tbl-cell center-text color-white">

                                <h5><b><?php echo $hero['small_title']; ?></b></h5>
                                <h1 class="mt-30 mb-15"><?php echo $hero['main_title']; ?></h1>
                                <?php if($hero['link']) {?>
                                <h5>
                                    <a href="<?php echo $hero['link'];?>" class="btn-primaryc plr-25">

                                      <b><?php echo $hero['link_text']; ?></b>

                                   </a>
                                </h5>
                                  <?php } ?>
                        </div><!-- dplay-tbl-cell -->
                </div><!-- dplay-tbl -->
        </div><!-- container -->
</section>

<?php $main_info = get_field('main_information'); ?>
<section class="story-area left-text center-sm-text pos-relative">
        <div class="abs-tbl bg-2 w-20 z--1 dplay-md-none"></div>
        <div class="abs-tbr bg-3 w-20 z--1 dplay-md-none"></div>
        <div class="container">
                <div class="heading">
                        <img class="heading-img" src="<?php echo get_template_directory_uri();?>/images/heading_logo.png" alt="">
                        <h2><?php echo $main_info['info_heading'];?></h2>
                </div>

                <div class="row">
                        <div class="col-md-6">
                                <p class="mb-30"><?php echo $main_info['left_side'];?> </p>
                        </div><!-- col-md-6 -->

                        <div class="col-md-6">
                                <p class="mb-30"><?php echo $main_info['right_side'];?></p>
                        </div><!-- col-md-6 -->
                </div><!-- row -->
        </div><!-- container -->
</section>


     <?php if( have_rows('best_sellers') ){ ?>
            <section class="story-area bg-seller color-white pos-relative">
            <div class="pos-bottom triangle-up"></div>
            <div class="pos-top triangle-bottom"></div>
            <div class="container">
                    <div class="heading">
                            <img class="heading-img" src="<?php echo get_template_directory_uri();?>/images/heading_logo.png" alt="">
                            <h2>Best Pizzas</h2>
                    </div>

            <div class="row">

            <?php while( have_rows('best_sellers') ){
                the_row(); 

                // vars
                $image = get_sub_field('image');
                $title = get_sub_field('title');
                $price = get_sub_field('price');
                $link = get_sub_field('link');
                $offer = get_sub_field('offer');
             ?>

                    <div class="col-lg-3 col-md-4  col-sm-6 ">
                                <div class="center-text mb-30">

                                        <div class="ïmg-200x mlr-auto pos-relative">
                                            <?php if($offer){?>
                                                <h6 class="ribbon-cont"><div class="ribbon primary"></div><b>OFFER</b></h6>
                                            <?php }?>
                                                <img src="<?php echo $image;?>" alt="">
                                        </div>
                                        <h5 class="mt-20"><?php echo $title; ?></h5>
                                        <h4 class="mt-5"><b><?php echo $price; ?></b></h4>

                                        <?php if($link){?>

                                        <h6 class="mt-20"><a href="<?php echo $link; ?>" class="btn-brdr-primary plr-25"><b>Check it out</b></a></h6>

                                        <?php }?>
                                </div><!--text-center-->
                     </div><!-- col-md-3 -->

            <?php } //end while ?>

                  </div><!-- row -->
                             <h6 class="center-text mt-40 mt-sm-20 mb-30"><a href="#" class="btn-primaryc plr-25"><b>SEE TODAYS MENU</b></a></h6>
               </div><!-- container -->
             </section>

     <?php } //end if?>



<section>
        <div class="container">
                <div class="heading">
                        <img class="heading-img" src="<?php echo get_template_directory_uri();?>/images/heading_logo.png" alt="">
                        <h2>Our Menu</h2>
                </div>

                    <?php if( have_rows('our_menu') ){ ?>

                          <div class="row">
                               <div class="col-sm-12">
                                <ul class="selecton brdr-b-primary mb-70">

                            <?php while( have_rows('our_menu') ){ the_row(); 

                                $category_name = get_sub_field('category_name');
                                $category = get_sub_field('category');

                                ?>
                                  <li><a href="#" class="active" data-select="<?php echo sanitize_title($category_name);?>"><b><?php echo $category_name;?></b></a></li>


                           <?php }//endwhile ?>

                              </ul>
                            </div><!--col-sm-12-->
                         </div><!--row-->

                        <?php }//endif ?>


                        <?php if( have_rows('our_menu') ){ ?>

                          <div class="row">

                           <?php while( have_rows('our_menu') ){ the_row(); 



                                ?>
                                  <div class="col-md-6 food-menu <?php echo sanitize_title($category_name);?>">

                                     <?php if( have_rows('category') ){ ?>

                                           <?php while( have_rows('category') ){ the_row(); 

                                             $title = get_sub_field('title');
                                             $image = get_sub_field('image');
                                             $description = get_sub_field('description');
                                             $price = get_sub_field('price');

                                           ?>

                                    <div class="sided-90x mb-30 ">
                                            <div class="s-left"><img class="br-3" src="<?php echo $image;?>" alt="Menu Image"></div><!--s-left-->
                                            <div class="s-right">
                                                    <h5 class="mb-10"><b><?php echo $title;?></b><b class="color-primary float-right"><?php echo $price;?></b></h5>
                                                    <p class="pr-70"><?php echo  $description;?></p>
                                            </div><!--s-right-->
                                    </div><!-- sided-90x -->
                                        <?php }//endwhile ?>
                                    <?php } wp_reset_query();//endif ?>

                                 </div><!-- food-menu -->




                            <?php }//endwhile ?>


                         </div><!--row-->

                        <?php }//endif ?>

                <h6 class="center-text mt-40 mt-sm-20 mb-30"><a href="#" class="btn-primaryc plr-25"><b>SEE TODAYS MENU</b></a></h6>
        </div><!-- container -->
</section>
<?php get_footer();?>

i have got Our menu repeater
within which i have category repeater and category name
within category repetaer i have image,title description,price
the active class is being added to all tabs on load

any help will be appreciated,thanks

0
Sash_007 7 months 0 Answers 96 views 0

Leave an answer