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
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
all posts shows under deserts only and rest tabs shows blank
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
advanced-custom-fields
7 months
0 Answers
96 views
0
Leave an answer
You must login or register to add a new answer .