Cheef Shop Product Code

.html

  <!-- CSS  -->     
  <style>
    .page-wrapper{
     display:flex;
     min-width:100%;
    }
    @media(max-width:900px){
      .page-wrapper{
     flex-flow:column;
    } 
    }
    .container-filter-wrapper{
     display:flex;
     flex-flow:column;
     height:100%;
     flex:1 1;
     width:100%;
     max-width:30%;
    }
    @media(max-width:900px){
      .container-filter-wrapper{
     max-width:100%;
    } 
    .container-filter-sidebar-title {
      display: grid;
      width: 100%;
      grid-template-columns: 1fr 1fr;
  }
    }
    .container-product-display{
  display:flex;
  height:100%;
  width:100%;
  max-width:70%;
  margin-left:10px;
    }
    @media(max-width:900px){
      .container-product-display{
  max-height:400px;
  overflow-y: scroll;
  margin-left:0px;
  max-width:100%;
    }
    }
    .container-product-display>div{
    height:100%;
    width:100%;
    display:grid;
    place-items: center ;
    flex: 1 1;
    }
   
    .category-filter-item{
     display:flex;
     flex-flow:column;
    }
    ul.cbd-products{
     display:none;
     transition: .3s ease;
     margin:0px;
    }
    
    
    /* Typography & Hover */
    .filter-title-wrapper {
     display: flex;
     height:6vh;
     padding:3%;   
    }
    @media(max-width:900px){
      .filter-title-wrapper {
     height:25px;  
    } 
    a.button.product_type_variable.add_to_cart_button {
      white-space: nowrap;
      font-size: 10px!important;
  }
  ul.products li.product {
     min-height:300px;
     height:100%;
  }
  ul.products li.product .price {
      font-size: 12px;
      line-height: 1;
  }
  /* Removes Badge for Mobile  */
  .yith-wcbm-badge {
      display: none;
  }
    }
    .category-filter-item h3{
     display:flex;
     justify-content: space-between;
     width:100%;
     margin:
    }
    @media(max-width:900px){
      .category-filter-item h3{
     font-size:14px;
    } 
    }
    .filter-title-wrapper:hover {
     background:#7ca354;
     color:white!important;
     transition:.3s ease;
     cursor: pointer;
     border-radius:3px;   
    }
    span.dropdown{
     transform-origin: center;
     height:20px;
     width:20px;
    }
    .dropdownClose{
     transform: rotate(45deg);
     transform-origin: center;
     transition:0.1s ease-in-out;
    }
    
    ul.cbd-products{
     padding:0px;
    }
    ul.cbd-products li{
     list-style-type: none;
     padding:3%;
    }
    ul.cbd-products li:hover,
    ul.cbd-products li:active,
    ul.cbd-products li:focus{
    color:white!important;
     background:#7ca354;
     transition:0.3s ease;
     cursor: pointer;
     border-radius:3px;   
    }
    ul.cbd-products li:hover h3,
    ul.cbd-products li:active h3,
    ul.cbd-products li:focus h3{
    color:white!important;
    }
    
    /* Product Section  */
    .hidden{
     display:none!important;
    }
    .container-product-display>div{
     display:none;
    }
    .visible{
     display:grid!important;
     height:100%;
    } 
    
    .productIsActive{
      color:white!important;
     background:#7ca354;
    }
    .white{
      color:white!important;
    }
    @media(max-width:900px){
      .container-product-display .product__categories{
        display:none;
      }
      .container-product-display ul.products li.product {
      position: relative;
      padding-right: 7px;
      padding-left: 7px;
      text-align: center;
  }
    }
    
    /* Adds styling to shortcode product  */
    ul.products.columns-3 {
        width: 100vw!important;
        max-width: 100%!important;
        min-width: 100%!important;
    }
    .columns-3{
        width: 100vw!important;
        max-width: 50vw;
    }
    #sidebar-mobile-btn {
      display:none;
    }
  
    /* Full screen Mobile  */
    @media(max-width:900px){
      .columns-3{
        max-width: 95vw;
      } 
      #sidebar-mobile-btn {
      display:flex;
      align-items: center;
    justify-content: center;
      background: #4c3f39;
      color: white;
      padding: 10px;
      text-align: center;
      border-radius: 3px;
      height:40px;
      }
      .container-filter-sidebar-title{
        display:none;
      }     
    }

    
 
             
    </style>
<!-- Loading Scripts -->
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
     <meta content="width=device-width, initial-scale=1" name="viewport" />
  </head>
  
<div class="page-wrapper">  
       <div class="container-filter-wrapper">
         <div id="sidebar-mobile-btn" class="container-filter-sidebar-mobile ">
          <img id="sidebarToggle" src="https://cheefbotanicals.com/wp-content/uploads/2022/02/Toggle-filter.png" alt="Img Toggle" height="25px" width="25px"> <p style="margin-left:10px;">CBD Product Filter</p> 
         </div>
         
        <div class="container-filter-sidebar-title">
         
           <!-- CBD Edibles  -->
           <div class="category-filter-item">
             <div id="cbd-edibles-category" class="filter-title-wrapper">
               <h3 class="filter-title" >CBD Edibles <span class="dropdown">+</span></h3>
             </div>
             <ul class="cbd-products">
               <li id="cbd-gummies">CBD Gummies - Fruit</li>
               <li id="cbd-gummies-cubes">CBD Gummies - Cubes</li>
               <li id="cbd-oil">CBD Oil Tinctures</li>
               <li id="cbd-capsules">CBD Capsules</li>
               <li id="cbd-honey-sticks">CBD Honey Sticks</li>
               <li id="cbd-edibles-bundles">CBD Edibles Bundles</li>
             </ul>
           </div>
           <!-- CBD Concentrates  -->
           <div class="category-filter-item">
             <div id="cbd-concentrates-category" class="filter-title-wrapper">
               <h3 class="filter-title" >CBD Concentrates <span class="dropdown">+</span></h3>
             </div>
             <ul class="cbd-products">
               <li id="cbd-wax">CBD Wax</li>
               <li id="cbd-isolate">CBD Isolate</li>
               <li id="cbd-distillate">CBD Distillate</li>
             </ul>
           </div>
           <!-- CBD Flower  -->
           <div class="category-filter-item">
             <div id="cbd-flower-category" class="filter-title-wrapper">
               <h3 class="filter-title">CBD Flower <span class="dropdown">+</span></h3>
             </div>
             <ul class="cbd-products">
               <li id="cbd-premium-flower">Premium CBD Flower</li>
               <li id="cbd-budget-flower">Budget CBD Flower</li>
               <li id="cbd-pre-rolls">CBD Pre Rolls & joints</li>
             </ul>
           </div>
           <!-- CBD Vapes  -->
           <div class="category-filter-item">
             <div id="cbd-vapes-category" class="filter-title-wrapper">
               <h3 class="filter-title" >CBD Vapes <span class="dropdown">+</span></h3>
             </div>
             <!-- <ul class="cbd-products">
               <li id="cbd-vapes">CBD Vapes</li>
             </ul> -->
           </div>
           <!-- CBD for Pets  -->
           <div  class="category-filter-item">
             <div id="cbd-for-pets-category" class="filter-title-wrapper">
               <h3 class="filter-title" >CBD for Pets <span class="dropdown">+</span></h3>
             </div>
             <ul class="cbd-products">
               <li id="cbd-cats">Cats</li>
               <li id="cbd-dogs">Dogs</li>
               <li id="cbd-horses">Horses</li>
             </ul>
           </div>
           <!-- CBD Topicals  -->
           <div class="category-filter-item">
             <div id="cbd-topicals-category" class="filter-title-wrapper">
               <h3 class="filter-title" >CBD Topicals <span class="dropdown">+</span></h3>
             </div>
             <ul class="cbd-products">
               <li id="cbd-bath">CBD Bath Bombs</li>
               <li id="cbd-body-lotion">CBD Body Lotion</li>
               <li id="cbd-relief-salve">CBD Relief Salve</li>
               <li id="cbd-lip-balm">CBD Lip Balm</li>
               <li id="cbd-hand-sanitizer">CBD Hand Sanitizer</li>
             </ul>
           </div>
           <!-- CBD Bundles  -->
           <div class="category-filter-item">
             <div id="cbd-bundles" class="filter-title-wrapper">
               <h3 class="filter-title" >CBD Bundles <span class="dropdown">+</span></h3>
             </div>
             <!-- <ul class="cbd-products">
               <li id="cbd-wax">CBD Bundles</li>
             </ul> -->
           </div>
         
       </div></div><!--End Container-Wrapper-->

       <!-- Start of Container Product Display  -->

       <div class="container-product-display">

        <div productData="cbd-edibles-category" class="product-shortcode product-1 visible"> 
            [products tag="CBD Edibles" class=""]
       </div> 

       <div productData="cbd-gummies" class="product-shortcode product-2 "> 
        [products tag="CBD Gummies Fruit" class=""]
      </div>  

       <div productData="cbd-gummies-cubes" class="product-shortcode product-3 "> 
        [products tag="CBD Gummies Cubes" class=""]
      </div>  
      
      <div productData="cbd-oil" class="product-shortcode product-4 "> 
        [products tag="CBD Oil Tincture" class=""]
      </div> 

      <div productData="cbd-capsules" class="product-shortcode product-5"> 
        [products tag="CBD Capsules" class=""]
      </div> 

      <div productData="cbd-honey-sticks" class="product-shortcode product-6"> 
        [products tag="CBD Honey Sticks" class=""]
      </div> 

      <div productData="cbd-edibles-bundles" class="product-shortcode product-7"> 
        [products tag="CBD Edibles Bundle" class=""]
      </div> 

      <div productData="cbd-concentrates-category" class="product-shortcode product-8"> 
        [products tag="CBD Concentrate" class=""]
      </div> 

      <div productData="cbd-wax" class="product-shortcode product-9"> 
        [products tag="CBD Wax" class=""]
      </div> 

      <div productData="cbd-isolate" class="product-shortcode product-10"> 
        [products tag="CBD Isolate" class=""]
      </div> 

      <div productData="cbd-distillate" class="product-shortcode product-11"> 
        [products tag="CBD Distillate" class=""]
      </div> 

      <div productData="cbd-flower-category" class="product-shortcode product-12"> 
        [products tag="CBD Flower" class=""]
      </div> 

      <div productData="cbd-premium-flower" class="product-shortcode product-13"> 
        [products tag="CBD Flower in Jar" class=""]
      </div> 

      <div productData="cbd-budget-flower" class="product-shortcode product-14"> 
        [products tag="Small Buds" class=""]
      </div> 

      <div productData="cbd-pre-rolls" class="product-shortcode product-15"> 
        [products tag="cbd-pre-roll" class=""]
      </div> 

      <div productData="cbd-vapes-category" class="product-shortcode product-16"> 
        [products tag="CBD Vapes" class=""]
      </div> 

      <div productData="cbd-for-pets-category" class="product-shortcode product-17"> 
        [products tag="CBD for Pets" class=""]
      </div> 

      <div productData="cbd-cats" class="product-shortcode product-18"> 
        [products tag="CBD for Cats" class=""]
      </div> 

      <div productData="cbd-dogs" class="product-shortcode product-19"> 
        [products tag="CBD for Dogs" class=""]
      </div> 

      <div productData="cbd-horses" class="product-shortcode product-20"> 
        [products tag="CBD for Horses" class=""]
      </div>

      <div productData="cbd-topicals-category" class="product-shortcode product-21"> 
        [products tag="CBD Topicals" class=""]
      </div>

      <div productData="cbd-bath" class="product-shortcode product-22"> 
        [products tag="CBD Bath Bombs" class=""]
      </div>

      <div productData="cbd-body-lotion" class="product-shortcode product-23"> 
        [products tag="CBD Body Lotion" class=""]
      </div>

      <div productData="cbd-relief-salve" class="product-shortcode product-24"> 
        [products tag="CBD Relief Salve" class=""]
      </div>

      <div productData="cbd-lip-balm" class="product-shortcode product-25"> 
        [products tag="CBD Lip Balm" class=""]
      </div>

      <div productData="cbd-hand-sanitizer" class="product-shortcode product-26"> 
        [products tag="CBD Hand Sanitizer" class=""]
      </div>

      <div productData="cbd-bundles" class="product-shortcode product-27"> 
        [products tag="Bundles" class=""]
      </div>



    </div> <!--End Container Product Display-->      
</div><!--End Page-Wrapper-->




       
<!-- JS  -->       
<script> 
  
  // GSAP Animation 
  var tl = gsap.timeline();
  function gsapProductSlideIn(){
   tl.from('.product-shortcode', {y:-30, duration:.5, opacity:0});
  }
  function gsapListSlideIn(){
   tl.from('.cbd-products', {y:-100, duration:.5, opacity:0});
  }

  // Typography   
  
  // Changes H3 Color on Hover 
  $('.filter-title-wrapper').hover( function(){
    $(this).find('h3').toggleClass('white');
  });
  
  // On Filter Wrapper Click 
  $('.filter-title-wrapper').click( function(){
    var thisTitleSelected  = $(this).find(' + .cbd-products'); 
    var productNameTitle = $(this).attr('id');
  
    //  Hides Previous Product div 
    hideProductDiv();
   
    //  Hides Previous Li Dropdown 
    hideSidebarTitle();
  
    //  Display div currently being clicked   
    $('div[productData='+productNameTitle+']').addClass('visible');
    gsapProductSlideIn();  
    
    //Tranforms + to x on Sidebar title click
    $(this).find('.dropdown')
    .toggleClass("dropdownClose");
  
    // Hide previous Product 
    function hideProductDiv(){
        $('.product-shortcode').removeClass('visible');  
    }
        
        // Hide Sidebar Title 
        function hideSidebarTitle(){ 
            if(!thisTitleSelected && $('.cbd-products.visible') ){
            $('.cbd-products.visible').toggleClass('visible');
            }
        
            thisTitleSelected.toggleClass('visible');   
        } 
  });
  
  // Toggle Visibility of products displayed in Container Product Display
  $('.cbd-products li').on('click', function(){ 
   var productName =  $(this).attr('id'); 
   $('.product-shortcode').removeClass('visible');  
   $('div[productData='+productName+']').addClass('visible'); 
   gsapProductSlideIn(); 
  });

  // Change Mobile Filter Toggle Icon 
    var $sbt =  $('#sidebarToggle');
    var $sbmb =  $('#sidebar-mobile-btn');
    var $cfsb=  $('.container-filter-sidebar-title');
    var closeURL = 'https://cheefbotanicals.com/wp-content/uploads/2022/02/Toggle-close.png';
    var openURL = 'https://cheefbotanicals.com/wp-content/uploads/2022/02/Toggle-filter.png';

    // Create a media condition that targets viewports at least 768px wide
    const mediaQuery = window.matchMedia('(max-width: 900px)')
    // Check if the media query is true
    if (mediaQuery.matches) {
      // Then trigger an alert
      $sbmb.click(function(){
      // Change between Open or Closed Toggle 
      if($sbt.attr('src') == openURL){
      $sbt.attr('src',closeURL);
      $cfsb.css('display','grid')
      displaySidebar();

      function displaySidebar(){
        tl.fromTo($cfsb, {y:-20}, {opacity:1})
      }
      }


      else if($sbt.attr('src') == closeURL){
      $sbt.attr('src',openURL);
      hideSidebar(); 

      function hideSidebar(){
        tl.to($cfsb, {y:-20,opacity:0, display:'none'})
      }
      }

      });

    }

 


 
  </script>