I want to be able to use the Isotobe filter URLs in my main nav link - but currently only filters data when link is clicked

So I have a page that uses jquery Isotope filtering https://buildingalifestyle.com/floor-plans/ - and the filters are working when you click the filter links - I noticed when you click the filter links the URL of the page changes to include the filtered results - however if I copy this URL and paste it in my main navigation - when the page loads the results are not filtered unless I click the filter link - So basically I want to display some filtered results as an item in my main site navigation when clicked the page would load just as if I had clicked the filter link which turns into this when clicked -  https://buildingalifestyle.com/floor-plans/#filter-lot-3

So I added some items to my main navigation under "Floor Plans" called Executive and Signature

signature = https://buildingalifestyle.com/floor-plans/#filter-lot-3
executive= https://buildingalifestyle.com/floor-plans/#filter-lot-2

So ideally I would like these results to be filtered when the page loads so the filters could essentially be triggered by clicking a link in the the main navigation menu.

This is what my code currently looks like - Isotope filter code is at the bottom
 

<?php
/**
 * Template Name: Page Find Your Home
 * A full-width template.
 *
 * @package Avada
 * @subpackage Templates
 */


// Do not allow directly accessing this file.
if ( ! defined( 'ABSPATH' ) ) {
   exit( 'Direct script access denied.' );
}
?>
      <?php get_header(); ?>
         
         <div id="content">


            <div  class="content2">


               <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
               
               <article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting">
                  
         
               
                  <section class="post_content clearfix" itemprop="articleBody">
                     <?php the_content(); ?>
               
                  </section> <!-- end article section -->
                       


<section id="options" class="clearfix combo-filters">
 
     <div class="filter-choice">
        <ul class="filter option-set clearfix " data-filter-group="bed">
          <li><a href="#filter-color-any" data-filter="" class="selected">any</a>
         
            <li><a href="#filter-bed-3" data-filter=".3-bed">3 Bedrooms</a></li>
         
            <li><a href="#filter-bed-4" data-filter=".4-bed">4 Bedrooms</a></li>
         
         
        </ul>
      </div>
     
     
   <div class="filter-choice">
        <ul class="filter option-set clearfix " data-filter-group="bath">
          <li><a href="#filter-color-any" data-filter="" class="selected">any</a>
         
            <li><a href="#filter-bath-2" data-filter=".2-bath">2 Bathrooms</a></li>
            <li><a href="#filter-bath-3" data-filter=".3-bath">3 Bathrooms</a></li>
         
            <li><a href="#filter-bath-4" data-filter=".4-bath">4 Bathrooms</a></li>
         
         
        </ul>
      </div>
     
     
         <div class="filter-choice">
        <ul class="filter option-set clearfix " data-filter-group="gar">
          <li><a href="#filter-gar-any" data-filter="" class="selected">any</a>
         
            <li><a href="#filter-gar-2" data-filter=".2-gar">2-Car Garage</a></li>
            <li><a href="#filter-gar-3" data-filter=".3-gar">3-Car Garage</a></li>
         
         
        </ul>
      </div>
     
 
      <div class="filter-choice">
      <ul class="filter option-set clearfix " data-filter-group="lot">
        <li><a href="#filter-lot-any" data-filter="" class="selected">any</a>
       
          <li><a href="#filter-lot-2" data-filter=".executive">Executive</a>
       
          <li><a href="#filter-lot-3" data-filter=".signature">Signature</a>
       
       
      </ul>
    </div>


</section> <!-- #options -->




<div id="plan-container" class="clearfix">
             <?php
                        $media_items = get_attachments_by_media_tags('media_tags=gallery&numberposts=24&return_type=li&size=full&post_parent='.$post->ID.'');
                        if ($media_items) {
                            echo $media_items;
                        }
                               ?>
      <?php
    //$mypost = array( 'post_type' => 'plan', );
   
    $mypost = array( 'post_type' => 'plan',    
    'tax_query'   => array(
        array(
            'taxonomy'  => 'custom_cat',
            'field'     => 'slug',
            'terms'     => array('alamanda-key','harmony','viera'), // exclude media posts in the news-cat custom taxonomy
            'operator'  => 'NOT IN')
            ),
           
            );
   
    $loop = new WP_Query( $mypost );
    ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post();?>
   
    <?php $lot = get_post_meta($post->ID, "wpcf-plan-type", true); //SWAP OUT "LOT" WITH THE NAME OF THE NEW CUSTOM FIELD ?>
    <? if($lot == "n") {$lot = "signature";} else {$lot = "executive";} // CHANGE $lot == "n" to whatever your first option is ?>
 
                <!-- Display featured image in right-aligned floating div -->
                <? if ($post->ID != 9000 )  { ?>
                <? $bathClass = ""; ?>
                <? if (get_post_meta($post->ID, "Bathrooms", true)=="2.5"){$bathClass = "2-bath 3-bath";} ?>
                <? if (get_post_meta($post->ID, "Bathrooms", true)=="3.5"){$bathClass = "3-bath 4-bath";} ?>                
                <div class="planGrid color-shape <?php echo get_post_meta($post->ID, "Bedrooms", true); ?>-bed <?php echo get_post_meta($post->ID, "Bathrooms", true); ?>-bath <? echo $bathClass; ?> <?php echo get_post_meta($post->ID, "Garage", true); ?>-gar <? echo $lot; ?>" data-bed="<?php echo get_post_meta($post->ID, "Bedrooms", true); ?>" data-bath="<?php echo get_post_meta($post->ID, "Bathrooms", true); ?>" data-gar="<?php echo get_post_meta($post->ID, "Garage", true); ?>" data-lot="<? echo $lot; ?>">
                <? } else {?>
               
                <div class="planGrid2 color-shape 3-bed 4-bed 2-bath 3-bath 4-bath 2-gar 3-gar executive signature list-position">
               
               <?  } ?>
                   <?php
//Get the Thumbnail URL
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 300,150 ), false, '' ); ?>
<a href="<? the_permalink(); ?>"><img src="<? echo $src[0]; ?>" width="300" height="150" /></a>
               
               
                    <div class="plan-name-wrapper">
                  <div class="house-title"><a href="<? the_permalink(); ?>"><? the_title(); ?></a></div>
                </div>
               
               
               
                </div>
 
               
   
    <?php endwhile; ?>
      </div>
       
   
 
 
</div> <!-- #container -->


<script>


   
// init Isotope
var $grid = jQuery('#plan-container').isotope({
  // options
  itemSelector: '.planGrid',
  layoutMode: 'fitRows'
});
// filter items on button click
jQuery('#options').on( 'click', 'a', function() {
  var filterValue = jQuery(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});
 
</script>

Select allOpen in new window

Select allOpen in new window